問(wèn)題描述

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

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

問(wèn)題解答

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

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

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