[分享]css3怎么设置展开和收缩动画

在CSS3的世界里，设置展开和收缩动画是很简单的任务。我们可以通过设置transition、transform等属性来实现这个目标。下面是一个简单的实例：/ 为容器设置基本样式 / .box { wi...

在CSS3的世界里，设置展开和收缩动画是很简单的任务。我们可以通过设置transition、transform等属性来实现这个目标。下面是一个简单的实例：

/* 为容器设置基本样式 */
.box {
  width: 200px;
  height: 150px;
  background-color: #ddd;
  overflow: hidden;
  /* 设置动画过渡效果 */
  transition: height 0.5s ease-out;
}

/* 设置展开状态下的样式 */
.box.active {
  height: 300px;
} 

在上面的代码中，我们首先为容器添加了一些基本样式，包括宽度、高度、背景色等等。接下来，我们通过设置overflow:hidden属性来隐藏容器的内容。同时，我们还要设置一个过渡效果，这个效果将在容器高度变化时触发。这里我们使用了CSS3的transition属性，指定了高度变化0.5s的过渡时间，以及缓动类型。

而为了实现展开效果，我们还需要添加一个.active类，这个类将会改变容器的高度，从而让内容呼之欲出。这里我们使用了CSS3的transform属性，通过scaleY函数来改变容器高度。而由于我们设置了transition属性，这个过渡效果将会平滑运行。

最后，在实际的项目中，我们需要通过JavaScript来控制展开和收缩效果。比如，通过点击按钮，添加/删除.active类来控制容器的高度变化。下面是一个简单的示例代码：

/* JavaScript代码 */
var btn = document.getElementById('btn');
var box = document.getElementById('box');

btn.addEventListener('click', function() {
  box.classList.toggle('active');
}); 

在这个代码中，我们通过添加点击事件监听来实现效果。当按钮被点击时，我们通过classList对象来切换.active类，从而控制展开和收缩的效果。这个对象可以很方便地添加、删除、判断元素的类。

总的来说，通过CSS3的transition、transform等属性，展开和收缩动画的实现变得非常简单。同时，结合JavaScript的事件监听，我们可以创建出非常漂亮的交互效果。以上就是CSS3设置展开和收缩动画的简单介绍，希望能够对你有所帮助。