前端 - [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操作