最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hidden 和 visible 来进行控制。因此,在最近的项目中,就开始深入研究CSS3关于动画的技术,并且运用到了项目中,下面是关于列表块的收缩&展开动画。
简单的一个效果图
实现思路
大体上我们将列表块分割成 标题块 和 内容块
(1)标题块: 展示标题和一个带有收缩&展开动画效果的图标
①图标部分,我们可以使用伪类来绘画出箭头,并且使用 transform 的旋转属性 rotate 进行图标的方向控制和其动画效果。
②动画控制,通常点击标题部分,列表则收缩&展开,因此点击标题时,要对class进行控制。
(2)内容块:内容块展示内容,且该块承载了主要的动画效果——列表的收缩&展开