英文:
How to animate expansion of grid layout?
问题
I want the div container to slide down to make room for the added row. Thanks for any help.
我想要div容器向下滑动以为新增的行腾出空间。感谢任何帮助。
英文:
I'm wondering how I would animate the expansion of a grid layout. As you can see in the code I have 4 divs. Two of them are displayed and the other two are displayed only when the checkbox is checked.
When the checkbox is checked another row is added, that contains div3 and div4. How do I make that expansion animated? Preferably keeping the size of the grids. I don't want the animation to affect the (non-existent) margins. I also want to do this without javascript. Is it possible?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Website</title>
</head>
<body>
<input class="toggle" type="checkbox">
<div class="grid">
<div class="div1">Hello</div>
<div class="div2">Hello2</div>
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</body>
</html>
.toggle {
width: 100%;
}
.grid {
display: grid;
width: 20%;
border: solid black 2px;
}
.div1 {
grid-column: 1;
grid-row: 1;
}
.div2 {
grid-column: 2;
grid-row: 1;
}
.div3 {
display: none;
}
.div4 {
display: none;
}
.toggle:checked ~ .grid > .div3 {
display: block;
grid-column: 1;
grid-row: 2;
}
.toggle:checked ~ .grid > .div4 {
display: block;
grid-column: 2;
grid-row: 2;
}
I want the div container to slide down to make room for the added row. Thanks for any help.
答案1
得分: 0
以下是翻译好的部分：
"解决方案非常简单。我将我的网格放入另一个网格中。然后，我只是在主网格中放置的 div 上使用 fr 来调整行的大小。这导致了将网格行从 0fr 转换为 1fr 的可能性。就是这样。
.toggle {
width: 100%;
}
.grid {
display: grid;
width: 20%;
border: solid black 2px;
}
.div1 {
grid-column: 1;
grid-row: 1;
}
.div2 {
grid-column: 2;
grid-row: 1;
}
.wrapper {
grid-column: 1 / 3;
grid-row: 2;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 200ms;
}
.div3 {
grid-column: 1;
grid-row: 1;
min-height: 0;
}
.div4 {
grid-column: 2;
grid-row: 1;
min-height: 0;
}
.toggle:checked ~ .grid > .wrapper {
grid-template-rows: 1fr;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Website</title>
</head>
<body>
<input class="toggle" type="checkbox">
<div class="grid">
<div class="div1">Hello</div>
<div class="div2">Hello2</div>
<div class="wrapper">
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</div>
</body>
</html>
此外，如果您的网格中有非常不同大小的行，例如一个是 0.05fr，另一个是 1fr，动画会变得“卡顿”。你可以做的是将包装网格放入另一个包装网格中。然后，不要使用实际行来动画化该网格，而是使用第一个网格的子级或实际网格的父级以相同的方法进行动画化。
这有点奇怪的解决方法，但这是一种在不重做太多工作的情况下解决问题的方式。"
英文:
The solution was quite simple. I put my grid into another grid. Then I simply used fr as the way to size my rows on the div the main grid was put into. Which led to the possibility of transforming the grid rows from 0fr to 1fr. And thats it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.toggle {
width: 100%;
}
.grid {
display: grid;
width: 20%;
border: solid black 2px;
}
.div1 {
grid-column: 1;
grid-row: 1;
}
.div2 {
grid-column: 2;
grid-row: 1;
}
.wrapper {
grid-column: 1 / 3;
grid-row: 2;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 200ms;
}
.div3 {
grid-column: 1;
grid-row: 1;
min-height: 0;
}
.div4 {
grid-column: 2;
grid-row: 1;
min-height: 0;
}
.toggle:checked ~ .grid > .wrapper {
grid-template-rows: 1fr;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Website</title>
</head>
<body>
<input class="toggle" type="checkbox">
<div class="grid">
<div class="div1">Hello</div>
<div class="div2">Hello2</div>
<div class="wrapper">
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
Also, if you have different very differently sized rows in your grid. For example one that is 0.05fr and one that is 1fr the animation will become "laggy". What you can do about that is put the wrapper grid into another wrapper grid. Then you dont animate that grid with your actual rows and instead animate the child of the first grid or the parent of your actual grid with the same method.
Kind of a weird workaround but it's one way to solve it without redoing much.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论