英文:
Why does transitioning from width: 100% cause the transition to be jumpy?
问题
我创建了一个 JSFiddle 来重新演示这个问题。
我试图让一个网格元素在悬停时变大,但它会导致一个奇怪的问题,它会位于另一个网格元素下方,然后突然变成我预期的样子。
为什么会发生这种情况,有没有办法解决它?
.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>
英文:
I made a JSFiddle to reenact this problem.
I am trying to get a grid element to grow when hovered, but it causes this weird problem where it goes under the other grid element, then jumps to how I expected and want it to be.
Why does this happen and is there a way to get around it?
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
<!-- end snippet -->
答案1
得分: 0
你可以使用 flexbox 与 flex
简写属性:
.container {
display: flex;
gap: 1em;
margin: 1em;
}
.box {
flex: 1; /* 这使得盒子默认平均占用空间 */
transition: 0.5s;
}
.box:hover {
flex: 2; /* 鼠标悬停时,盒子扩展速度是非悬停状态的两倍 */
}
试一试:
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
请注意:这是一个示例,用于演示 flexbox 的使用方法。
英文:
You can use flexbox with the flex
short-hand property:
.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 */
}
Try it:
<!-- begin snippet: js hide: true -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
<!-- end snippet -->
答案2
得分: 0
我已经写了一篇详细的文章,介绍了如何使用CSS网格实现这种效果。欢迎你阅读这篇文章,以了解如何使用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; /* 请阅读文章以了解设置此值背后的数学原理 */
}
.one {background: pink;}
.two {background: red;}
body {
margin: 0;
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
英文:
I have wrote a detailed article about such effect that I invite you to read to understand how to achieve such effect using CSS grid: https://css-tricks.com/zooming-images-in-a-grid-layout/
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论