css 收起动画 |css js侧边栏

/* 设置默认状态 */
.content {
height: auto;
overflow: hidden;
transition: height .3s ease-out;
}
/* 点击按钮后设置收起状态 */
.btn:focus + .content {
height: 0;
transition: height .3s ease-in;
}

以上代码中，大家先设置了默认的状态，即内容区域的高度为自动，并使用overflow: hidden来隐藏超出部分。同时，大家设置了一个过渡效果，让高度的变化看起来更加平滑自然。

接下来，大家通过设置:focus伪类来监听按钮的点击事件，当按钮获得焦点后，大家将内容区域的高度设置为0，从而实现收起的效果。同时，大家也重新设置了过渡效果的属性，让高度变化更加快速和自然。

总的来说，CSS收起动画是一种非常实用且易于实现的特性，可以让网页更加美观和动态。希望以上介绍能对大家有所帮助。