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