CSS使用过渡动画实现展开折叠效果

在 CSS 中，可以使用过渡动画来实现展开折叠效果。以下是具体的实现方法：

一、HTML 结构

假设我们有一个简单的元素，比如一个 <div>，可以作为要展开折叠的容器。

html

<div class="toggle-container">
  这里是内容。
</div>

二、CSS 样式

1. 首先，设置容器的初始样式，比如默认是折叠状态，高度为 0 或者一个较小的值，并且隐藏溢出内容。

css

.toggle-container {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

在上述代码中，overflow: hidden 用于隐藏超出容器的内容。height: 0 设置初始高度为 0，使其处于折叠状态。transition: height 0.5s ease 定义了高度属性的过渡效果，时长为 0.5 秒，过渡方式为 ease（缓入缓出）。

1. 然后，当需要展开容器时，可以通过添加一个特定的类来改变容器的高度。

假设添加 .open 类表示展开状态：

css

.toggle-container.open {
  height: 100px; /* 根据实际内容调整高度 */
}

三、使用 JavaScript 触发展开折叠

可以使用 JavaScript 来添加或移除 .open 类，从而触发展开折叠效果。

javascript

const toggleContainer = document.querySelector('.toggle-container');
toggleContainer.addEventListener('click', function() {
  this.classList.toggle('open');
});

在上述代码中，当用户点击容器时，切换 .open 类，从而实现展开折叠效果。

通过以上步骤，就可以使用 CSS 过渡动画实现展开折叠效果。你可以根据实际需求调整过渡的时长、过渡方式以及展开后的高度等参数。