JS实现的简单折叠展开动画效果示例

下面是JS实现的简单折叠展开动画效果的攻略：

什么是折叠展开动画效果？

折叠展开动画效果是一种常见的页面交互设计，通过点击或者鼠标悬浮事件，展开或折叠相应的内容区域，给用户更好的使用体验。

实现流程

1. 准备HTML结构，在需要折叠展开的区域加入相应的class；

2. 使用CSS定义默认状态和展开状态的样式，并为相应的class设置过渡效果；

3. 编写事件监听函数，在用户触发事件时改变折叠展开区域的class，从而实现动画效果。

示例说明

示例1：折叠展开列表

HTML结构：

<ul class="list">
  <li class="item">列表项1</li>
  <li class="item">列表项2</li>
  <li class="item">列表项3</li>
</ul>

CSS样式：

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.item {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}
.item.active {
  height: 30px;
}

JavaScript代码：

var itemList = document.querySelectorAll('.item');
for (var i = 0; i < itemList.length; i++) {
  itemList[i].addEventListener('click', function() {
    this.classList.toggle('active');
  });
}

代码说明：

• 初始状态下，列表项的高度为0，通过overflow:hidden隐藏内容；
• 点击列表项时，通过toggleClass方法为其添加或删除.active类，从而改变高度，实现动画效果。

示例2：折叠展开内容

HTML结构：

<div class="content">
  <h2 class="title">这是标题</h2>
  <div class="text">这是内容，可以折叠展开</div>
  <button class="btn">展开/收起</button>
</div>

CSS样式：

.content {
  position: relative;
  height: 50px;
  overflow: hidden;
}
.text {
  position: absolute;
  top: 50px;
  transition: top 0.5s ease;
}
.text.active {
  top: 0;
}

JavaScript代码：

var btn = document.querySelector('.btn');
var text = document.querySelector('.text');
btn.addEventListener('click', function() {
  text.classList.toggle('active');
});

代码说明：

• 初始状态下，内容区域通过position:absolute定位，top值为父容器高度，从而隐藏内容；
• 点击按钮时，通过toggleClass方法为内容区域添加或删除.active类，从而改变top值，实现动画效果。

总结

以上就是JS实现折叠展开动画效果的攻略和示例。需要注意的是，在实现过程中，CSS的transition属性是关键，通过定义好的过渡效果，让代码实现起来更加简单、优雅。