在做移动端的时候，会有从手机底部弹出菜单这样的需求。弹入比较好做，修改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"
}
}
