/* 初始状态 */
.box {
height: 0;
overflow: hidden;
visibility: hidden;
transition: height 0.3s ease-out;
}
/* 触发高度变化 */
.box.active {
height: 200px;
visibility: visible;
}上面的代码中，大家首先给 .box 元素设置了一个初始高度为 0，并将 overflow 设置为 hidden，让元素的内容不可见，避免出现跳动的效果。同时，大家将 visibility 设置为 hidden，这样在高度为 0 的时候，虽然元素本身是存在的，但是它并不会占据页面的空间。接下来，大家使用 transition 属性来声明高度变化需要过渡的属性，以及过渡所需的时间和缓动函数。
当需要触发高度变化时，大家可以使用 JavaScript 动态地给 .box 添加一个 active 类。这个类会将元素的高度设置为 200px，以展现出高度的变化效果。并且，大家还需要将元素的 visibility 切换为 visible，以防出现内容消失的问题。
最后，大家需要一个按钮来触发高度变化。在这里，偶使用了一个简单的 JavaScript 代码，通过 toggle 方法来切换 active 类的状态，实现高度的展开与闭合。当大家点击按钮时，元素的高度会平滑地从 0 过渡到 200px，再次点击时，元素会平滑地从 200px 过渡到 0。