国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Warum führt der übergang von width: 100 % dazu, dass der übergang springt?
P粉769045426
P粉769045426 2023-09-13 14:24:30
0
2
609

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>

P粉769045426
P粉769045426

Antworte allen(2)
P粉613735289

我寫了一篇關(guān)于這種效果的詳細(xì)文章，我邀請您閱讀以了解如何使用 CSS 網(wǎng)格實(shí)現(xiàn)這種效果：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>
P粉189606269

您可以將 Flexbox 與 flex結(jié)合使用> 簡寫屬性：

.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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage