CSS使用过渡动画实现展开折叠效果
/* 设置基础样式 */
.container {
width: 200px;
height: 200px;
background-color: #f0f0f0;
overflow: hidden;
transition: height 0.5s ease-in-out;
}
/* 折叠状态 */
.container.collapsed {
height: 0;
}
/* 展开状态 */
.container.expanded {
height: 200px;
}
/* 触发折叠和展开的按钮 */
.toggle-button {
cursor: pointer;
padding: 5px;
background-color: #ddd;
border: 1px solid #ccc;
text-align: center;
}在这个例子中，.container 类定义了一个容器的基础样式，并且通过 transition 属性指定了当 height 变化时应用过渡效果。.container.collapsed 类用于在容器被折叠时设置 height 为 0，使得容器不可见。.container.expanded 类用于在容器被展开时设置 height 为 200px。.toggle-button 类定义了触发折叠和展开操作的按钮样式。
评论已关闭