如何为Grid布局的展开添加平滑动画效果？

需求说明 #

默认显示Grid布局中的前两个div，勾选checkbox后平滑滑出包含div3和div4的第二行；要求无需JavaScript，保持网格尺寸与边距不变，动画为向下展开效果。

解决方案 #

核心是替换不可动画的display: none，改用可过渡的CSS属性配合Grid行高变化实现平滑效果：

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="div3">Hello3</div>
        <div class="div4">Hello4</div>
    </div>
</body>
</html>

修改后的CSS代码 #

.toggle {
    width: 100%;
}

.grid {
    display: grid;
    width: 20%;
    border: solid black 2px;
    grid-template-columns: 1fr 1fr; /* 明确列宽，避免布局偏移 */
    grid-template-rows: auto 0; /* 默认第二行高度为0 */
    transition: grid-template-rows 0.3s ease; /* 行高过渡动画 */
    overflow: hidden; /* 隐藏第二行超出内容 */
}

.div1 {
    grid-column: 1;
    grid-row: 1;
}

.div2 {
    grid-column: 2;
    grid-row: 1;
}

.div3, .div4 {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.div3 {
    grid-column: 1;
    grid-row: 2;
}

.div4 {
    grid-column: 2;
    grid-row: 2;
}

/* 勾选状态触发动画 */
.toggle:checked ~ .grid {
    grid-template-rows: auto auto; /* 第二行高度恢复为auto */
}

.toggle:checked ~ .grid > .div3,
.toggle:checked ~ .grid > .div4 {
    opacity: 1;
    max-height: 100px; /* 设为足够容纳内容的高度，可按需调整 */
}

关键实现细节 #

• 放弃display: none：该属性无法参与CSS过渡，改用opacity控制透明度、max-height控制元素高度，配合overflow: hidden隐藏未展开内容
• Grid容器高度过渡：通过grid-template-rows从0到auto的变化，实现容器向下展开的平滑动画
• 元素同步动画：div3和div4的透明度、高度动画与Grid容器的行高动画保持时长一致，保证视觉连贯
• 纯CSS触发：依靠CSS兄弟选择器:checked ~ .grid感知checkbox状态，全程无需JavaScript

内容的提问来源于stack exchange，提问作者Hugo Lundqvist