前言

先看看已经完成了的效果

在实现这个简单常见的效果的时候，就想着根据display的变化，家电css3动画效果应该就OK了，但是过程中遇到点小问题，这里记录一下

实现过程

简单的贴一下css代码

关于animation、keyframes的使用这里就不说了。

下面是利用js判断classname进行替换，从而使用该class的css动画效果

按设想，应该是替换了class后，执行动画过程，然后display走一波。

但实际效果是下面这样的

只有show的时候有动画效果。
hide的时候没有触发css动画效果。

那自然就想，是不是先修改了display为none，导致后面动画效果没法出现？
和浏览器重绘，回流有没有关系呢？

先看看是不是由于先执行了修改display。

搜索了一下发现动画执行完毕后会有个回调函数 animationend

理想状态是文章开头的gif效果

看来是执行顺序的问题了，done