Mengapa peralihan daripada lebar: 100% menyebabkan peralihan melonjak?

Question

Saya membuat JSFiddle untuk menghasilkan semula isu ini.

Saya cuba membuat elemen grid berkembang pada tuding, tetapi ia menyebabkan isu pelik ini apabila ia berlaku di bawah elemen grid lain dan kemudian melompat seperti yang saya harapkan.

Mengapa ini berlaku? Adakah terdapat cara untuk menyelesaikannya?

.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

Saya menulis artikel terperinci tentang kesan ini dan saya menjemput anda membacanya untuk mengetahui cara mencapai kesan ini menggunakan Grid 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;
}

P粉189606269 · Answer

Anda boleh menggabungkan Flexbox dengan flex结合使用> sifat trengkas:

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

Cubalah:

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