最近在看浏览器的工作原理，继而想到之前实现的一个抽屉动画，从左至右拉出的那种效果。
伪代码如下：

//css
.drawer {
    display: none;
    width: 50vw;
    height: 100vh;
    position: absolute;
    left: -50vw;
    top: 0;
    transition: height 1s linear;
}

.drawer-show {
    left: 0;
}

// js

function showDrawer(){
    let drawerDiv = document.getElementsByClassname('drawer')
    drawerDiv.style.display = 'block'    //1.
    drawerDiv.classList.add('drawer-show')  //2.
}

function closeDrawer(){
    let drawerDiv = document.getElementsByClassname('drawer')
    drawerDiv.classList.remove('drawer-show')  //5.
    drawerDiv.style.display = 'none'    //6.
}

//html
<div class='drawer'>
    <!-- content -->
    <!-- content -->
    <!-- content -->
</div>
<div class='button-show-drawer' onclick="showDrawer">click</div>

代码的大致思路是将drawer层放到视口之外，transition他的left属性，当点击事件发生的时候覆盖left样式，因为transiton的原因会实现从左到右平移。
但是因为display:none 的存在，即使先设置block，transtion动画仍然会失效。
于是改造了showDrawer和closeDrawer函数，如下：

//js
function showDrawer() {

let drawerDiv = document.getElementsByClassname('drawer')
drawerDiv.style.display = 'block'   // 3.
setTimeout(()=>{  
   drawerDiv.classList.add('drawer-show')  //4.
})

}

function closeDrawer(){

let drawerDiv = document.getElementsByClassname('drawer')
drawerDiv.classList.remove('drawer-show')  //5.
setTimeout(()=>{
   drawerDiv.style.display = 'none'    //6.
}, 1000)

}

于是，保留了在display的情况下，transtion也能够正常运行了。
之前了解到，js引擎在解析代码时，遇到setTimeout这种异步方法时，会创建宏任务，待到主线程中任务执行完了，再去调用微任务，宏任务……如此循环。

那么问题来了，
1.如何避免display为none的情况下（或者说改变display的情况下），仍然使动画生效。

2.js 操作DOM的时候，是即时生效的吗？如1.和2.行中的代码是立即block了，然后添加了transition。还是如3.和4.行中的代码每一个任务队列执行“一批”dom操作。因为一批操作的原因使block已经生效，于是使后面的也能够transition生效。

3.我观察antd-mobile中的drawer实现，似乎是transition抽屉元素的translateX，但是会有后遗症，虽然平移走了drawer，但仍然会有一层layer层覆盖在表面顺带还阻止穿透了...于是我通过上述setTimeout方法，来移除layer层，避免了问题1.是不是我的使用方法有问题...

4.我感觉我解决方法(改造后的showDrawer函数)不太规范，有没有其他实现类似drawer动画的方法。

5.“浏览器渲染引擎和js引擎间的交互”， 有没有专业一点的名词？我好去翻下书？

以上问题来源是在React.js下写代码的时候提出的。