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

问题描述

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

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

问题解答

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

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

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