[css动画] transition动画之后执行display:none，动画不生效，怎么解决？

Question

大家好，我遇到的问题是一个类似于微信聊天的时候点击加号出现菜单，

打开菜单的时候没有什么问题，关闭菜单是先transition动画，然后设置display为none
但是这样做好像display会破坏transition的执行，动画不会生效，请问怎么解决这个问题？

Answer 1

你的display：none应该是立刻就执行了，并没有在transition动画后执行，所以直接就隐藏了。
如果你需要这样做的话
1、你可以延时执行dislpay：none的操作。setTimeout(function(){//执行},200);
2、如楼上操作用jQuery的animate，然后在animate的回调中设置dislpay：none；
3、直接眼红jQuery的slidedown

Answer 2

动画可以写在jQuery的animate()中，动画完成后执行让它display:none的回调函数

Answer 3

监听transitionend事件，在回调里面执行display:none操作