css3实现弹入弹出效果

在做移动端的时候，会有从手机底部弹出菜单这样的需求。弹入比较好做，修改display属性再加个动画即可，但是弹出却不太好做。
一是修改display属性为none后无法再执行动画
二是动画首次加载完成之后，css并未提供手动让其再次执行的方法（若有欢迎补充）

有了问题，接下来便是拆分解决。针对第一个，可以将display调整到动画执行之后再修改。第二个，修改元素的属性，触发回流，继而再次执行动画。

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




.base{
    display:none;
}
//进入
.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')
//此步触发回流
var nothing=e.offsetWidth
// 有的教程会写成e.offsetWidth=e.offsetWidth，
//我觉得其实没有必要写成这样。获取一次，修改一次可能会触发两次回流重绘动作
e.classList.add('leave')


//动画结束修改`display`属性
//兼容onanimationend事件
if(!('onanimationend' in window)){
      setTimeout(()=>{
      e.style.display="none"
},500)//动画执行时间


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