height 0 到 auto 的动画效果

在以前实现这种效果需要借助 js 的来计算实际高度，现在可完全使用 css 实现，只要浏览器兼容（目前大部分浏览器都已兼容）

使用 flex

.wrapper {
    display: flex;
    transition: 0.3s;
}
.inner {
    max-height: 0;
    overflow: hidden;
}
.wrapper:hover .inner {
    max-height: 100%;
}

<div class="wrapper">
    <div>
        <div class="inner">...</div>
    </div>
</div>

示例

这是一段文本

使用 grid

推荐使用这种方法。flex 的实现，父元素的高度没有过渡

.flex {
    display: grid;
    transition: 0.3s;
    grid-template-rows: 0fr;
}
.inner {
    overflow: hidden;
}
.flex:hover {
    grid-template-rows: 1fr;
}

<div class="flex">
    <div class="inner">...</div>
</div>

示例

这是一段文本

# height 0 到 auto 的动画效果

# 使用 flex

# 示例

# 使用 grid

# 示例

height 0 到 auto 的动画效果

使用 flex

示例

使用 grid

示例