Warum führt der Übergang von width: 100 % dazu, dass der Übergang springt?

Question

Ich habe ein JSFiddle erstellt, um dieses Problem zu reproduzieren.

Ich versuche, ein Rasterelement beim Schweben wachsen zu lassen, aber es verursacht dieses seltsame Problem, wenn es unter ein anderes Rasterelement geht und dann so springt, wie ich es erwartet habe.

Warum passiert das? Gibt es eine Lösung?

.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>

Answer 1

我写了一篇关于这种效果的详细文章，我邀请您阅读以了解如何使用 CSS 网格实现这种效果：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;
}

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

Answer 2

您可以将 Flexbox 与 flex 简写属性：

.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 */
}

尝试一下：

.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;
}

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