問題描述

大家好，我遇到的問題是一個類似于微信聊天的時候點(diǎn)擊加號出現(xiàn)菜單，

打開菜單的時候沒有什么問題，關(guān)閉菜單是先transition動畫，然后設(shè)置display為none但是這樣做好像display會破壞transition的執(zhí)行，動畫不會生效，請問怎么解決這個問題？

問題解答

你的display：none應(yīng)該是立刻就執(zhí)行了，并沒有在transition動畫后執(zhí)行，所以直接就隱藏了。如果你需要這樣做的話1、你可以延時執(zhí)行dislpay：none的操作。setTimeout(function(){//執(zhí)行},200);2、如樓上操作用jQuery的animate，然后在animate的回調(diào)中設(shè)置dislpay：none；3、直接眼紅jQuery的slidedown

動畫可以寫在jQuery的animate()中，動畫完成后執(zhí)行讓它display:none的回調(diào)函數(shù)

監(jiān)聽transitionend事件，在回調(diào)里面執(zhí)行display:none操作