京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果

最近在做项目时，发现CSS3中关于动画的技术，自己很少运用在项目中，平时一些列表块的收缩和展开动画效果，几乎都是使用 display 的 none 和 block，或者 visibility 的 hidden 和 visible来进行控制。因此，在最近的项目中，就开始深入研究CSS3关于动画的技术，并且运用到了项目中，下面是关于列表块的收缩&展开动画。

简单的一个效果图

实现思路

大体上我们将列表块分割成 标题块 和 内容块

(1)标题块：展示标题和一个带有收缩&展开动画效果的图标

①图标部分，我们可以使用伪类来绘画出箭头，并且使用 transform 的旋转属性 rotate进行图标的方向控制和其动画效果。

②动画控制，通常点击标题部分，列表则收缩&展开，因此点击标题时，要对class进行控制。

(2)内容块：内容块展示内容，且该块承载了主要的动画效果——列表的收缩&展开

①动画效果：该块的动画，我们的思路是整个块的高度收起来，里面的内容也向左边隐藏，因此需要控制高度和动画的隐藏，所以使用 max-height 进行高度控制和 transition(设置动画时间)、transform 的属性 translate来进行内容的隐藏

完整代码如下：

.block_wrap {

width: 500px;

margin: 0 auto;

border: 1px solid #e3e3e3;