在做移動端的時候，會有從手機(jī)底部彈出菜單這樣的需求。彈入比較好做，修改display屬性再加個動畫即可，但是彈出卻不太好做。
一是修改display屬性為none后無法再執(zhí)行動畫
二是動畫首次加載完成之后，css并未提供手動讓其再次執(zhí)行的方法（若有歡迎補(bǔ)充）

有了問題，接下來便是拆分解決。針對第一個，可以將display調(diào)整到動畫執(zhí)行之后再修改。第二個，修改元素的屬性，觸發(fā)回流，繼而再次執(zhí)行動畫。

<div id="el" class="base">
  
</div>




.base{
    display:none;
}
//進(jìn)入
.enter{
    animation:fade-in .5s ease;
}

//離開
.leave{
   animation:fade-in .5s ease reverse;
}


const e=document.getElementById('el');


//彈入
e.classList.remove('leave')
e.classList.add('enter');
e.style.display="block"


//彈出
e.classList.removeClass('enter')
//此步觸發(fā)回流
var nothing=e.offsetWidth
// 有的教程會寫成e.offsetWidth=e.offsetWidth，
//我覺得其實沒有必要寫成這樣。獲取一次，修改一次可能會觸發(fā)兩次回流重繪動作
e.classList.add('leave')


//動畫結(jié)束修改`display`屬性
//兼容onanimationend事件
if(!('onanimationend' in window)){
      setTimeout(()=>{
      e.style.display="none"
},500)//動畫執(zhí)行時間


e.onanimationend=()=>{
 if(e.classList.contains('leave'){
    e.style.display="none"
 }
}