CSS3+HTML5+JS 实现一个块的收缩与展开动画效果

实现一个块的收缩与展开动画效果，需要用到CSS3、HTML5以及JS。具体过程如下：

实现一个块的收缩与展开动画效果，需要用到CSS3、HTML5以及JS。具体过程如下：

1. HTML5结构

首先，我们需要在HTML5中定义一个需要实现动画效果的块元素。例如：

<div class="block">要实现动画效果的内容</div>

2. CSS3样式

接下来，我们需要为这个块元素定义一些CSS3的样式。具体来说，我们需要定义这个块元素的默认状态、展开状态和收缩状态。例如：

/* 默认状态 */
.block {
  height: 200px; /* 默认高度 */
  transition: height 0.5s; /* 动画效果：高度变化在0.5秒内实现 */
}

/* 展开状态 */
.block.expanded {
  height: 400px; /* 展开后的高度 */
}

/* 收缩状态 */
.block.collapsed {
  height: 0; /* 收缩后的高度 */
}

3. JS代码

最后，我们需要编写JS代码，实现鼠标点击块元素时的动画效果。具体来说，我们需要监听块元素的点击事件，并根据当前状态，改变块元素的class属性来实现展开和收缩效果。例如：

// 获取块元素
var block = document.querySelector('.block');

// 监听点击事件
block.addEventListener('click', function() {
  // 如果当前是展开状态，就改为收缩状态
  if (block.classList.contains('expanded')) {
    block.classList.remove('expanded');
    block.classList.add('collapsed');
  // 如果当前是收缩状态或默认状态，就改为展开状态
  } else {
    block.classList.remove('collapsed');
    block.classList.add('expanded');
  }
});

示例说明

下面分别通过两个示例，来说明如何实现这个块的收缩与展开动画效果。

示例1：收缩/展开菜单

在示例1中，我们可以使用这种动画效果来实现一个收缩/展开菜单。例如：

<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
  <li><a href="#">菜单项4</a></li>
  <li><a href="#">菜单项5</a></li>
</ul>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 默认状态 */
.menu li {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  transition: height 0.5s;
}

/* 展开状态 */
.menu.expanded li {
  height: 60px;
}

/* 收缩状态 */
.menu.collapsed li {
  height: 0;
  line-height: 0;
}

// 获取菜单元素
var menu = document.querySelector('.menu');

// 监听点击事件
menu.addEventListener('click', function() {
  // 如果当前是展开状态，就改为收缩状态
  if (menu.classList.contains('expanded')) {
    menu.classList.remove('expanded');
    menu.classList.add('collapsed');
  // 如果当前是收缩状态或默认状态，就改为展开状态
  } else {
    menu.classList.remove('collapsed');
    menu.classList.add('expanded');
  }
});

示例2：伸缩的图片

在示例2中，我们可以使用这种动画效果来实现一个伸缩的图片。例如：

<div class="picture">
  <img src="image.jpg" alt="一张图片">
</div>

/* 默认状态 */
.picture {
  width: 400px;
  height: 300px;
  transition: width 0.5s, height 0.5s;
}

/* 展开状态 */
.picture.expanded {
  width: 800px;
  height: 600px;
}

/* 收缩状态 */
.picture.collapsed {
  width: 0;
  height: 0;
}

// 获取图片元素
var picture = document.querySelector('.picture');

// 监听点击事件
picture.addEventListener('click', function() {
  // 如果当前是展开状态，就改为收缩状态
  if (picture.classList.contains('expanded')) {
    picture.classList.remove('expanded');
    picture.classList.add('collapsed');
  // 如果当前是收缩状态或默认状态，就改为展开状态
  } else {
    picture.classList.remove('collapsed');
    picture.classList.add('expanded');
  }
});

以上就是完整的攻略，通过这个方法，就可以实现一个块的收缩与展开动画效果，使页面更加动态和有趣。