Pourquoi la transition depuis width : 100 % provoque-t-elle un saut de la transition ?

Question

J'ai créé un JSFiddle pour reproduire ce problème.

J'essaie de faire grandir un élément de grille en survol, mais cela provoque ce problème étrange où il passe sous un autre élément de grille, puis saute comme je l'attends.

Pourquoi cela arrive-t-il ? Y a-t-il un moyen de résoudre ?

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template: 1fr / 1fr 1fr;
  margin: 1em;
  grid-gap: 1em;
}

.box {
  height: 100%;
  width: 100%;
  transition: width 0.5s;
}

.one {
  background: pink;
}

.two {
  background: red;
}

.box:hover {
  width: 60vw;
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

P粉613735289 · Answer

J'ai écrit un article détaillé sur cet effet et je vous invite à le lire pour apprendre comment réaliser cet effet en utilisant CSS Grid : https://css-tricks.com/zooming-images-in-a-grid -layout/

.container {
  height: calc(100vh - 2em);
  display: grid;
  grid-template-columns: auto auto;
  margin: 1em;
  gap: 1em;
}
.box {
  width: 0;
  min-width: 100%;
  transition: width 0.5s;
}
.box:hover {
  width: 40vw; /* read the article to understand the math behind setting this value */
}

.one {background: pink;}
.two {background: red;}

body {
  margin: 0;
}

P粉189606269 · Answer

Vous pouvez combiner Flexbox avec flex结合使用> propriétés abrégées :

.container {
  display: flex;
  gap: 1em;
  margin: 1em;
}

.box {
  flex: 1; /* This makes boxes take equal space by default */
  transition: 0.5s;
}

.box:hover {
  flex: 2; /* A hovered box expands twice as fast as a non-hovered */
}

Essayez-le :

.container {
  display: flex;
  gap: 1em;
  margin: 1em;
}

.box {
  flex: 1;
  transition: 0.5s;
}

.box:hover {
  flex: 2;
}


/* Demo only */

body {
  margin: 0;
}

.container {
  height: 100vh;
}

.box {
  height: 100%;
}

.one {
  background: pink;
}

.two {
  background: red;
}