[分享]css3折叠动画显示隐藏

CSS3折叠动画是一种非常流行的效果，可以用于显示或隐藏元素，如下拉菜单、文本框等。我们可以使用CSS3中的transition和transform属性来创建这种动画效果。本文将介绍如何使用CSS3折...

CSS3折叠动画是一种非常流行的效果，可以用于显示或隐藏元素，如下拉菜单、文本框等。我们可以使用CSS3中的transition和transform属性来创建这种动画效果。本文将介绍如何使用CSS3折叠动画来显示或隐藏元素。

/* 让元素隐藏 */
.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* 将元素展开 */
.collapsible.active {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
} 

首先，我们需要将要折叠的元素的max-height属性设置为0，并设置overflow:hidden。这将确保元素在最初被隐藏后，不会出现滚动条等部件。 使用transition属性为max-height添加动画效果，这样可以平滑地展开或收缩元素。

接下来是展开时的CSS代码。我们需要给元素添加一个active类。 这个类将覆盖原来的样式，将max-height设置为正常大小，从而展开元素。此外， max-height的过渡时间更长，为了让过渡效果更流畅。

最后我们要做的就是使用JavaScript来切换元素的active类。这里有两种方法，click和hover。click方法可以在单击时切换元素的active类，而hover方法则会在鼠标over和out事件上切换类。 这些方法非常适用于下拉菜单和弹出框等元素。 下面是一个点击按钮来切换元素的JavaScript代码：

document.querySelector('.toggle').addEventListener('click', function() {
  this.classList.toggle('active');
}); 

上面的代码使用querySelector来获取toggle按钮并添加点击事件监听器。 当用户点击按钮时，toggleClass将在按钮和元素之间切换active类，从而展开或收缩元素。

总之， CSS3折叠动画是一种非常方便且实用的工具，可以为网站和应用程序增加更好的用户体验。通过使用上面的CSS和JavaScript代码，您可以轻松地为自己的网站添加这种效果。