原生js实现抽屉动画

1. 根据转换角度方法来实现

基础样式

.base {
    transform: rotateX(-90deg);
    transform-origin: top;
    transition: transform .3s ease;
}

折叠样式

.collapse {
    transform: rotateX(0deg) !important;
}

通过给盒子动态添加移除collapse样式来时先，简单的两个样式，即可实现抽屉效果。

2.其他方式

1.element内置动画

collapse 展开折叠

不过，此方法有可能产生抖动bug，具体解决方法是在动画标签内再包裹一层div，类似这样

<el-collapse-transition>
    // 包裹的div
    <div v-show="show3">
        // 原折叠逻辑
        <div>
            <div class="transition-box">el-collapse-transition</div>
            <div class="transition-box">el-collapse-transition</div>
        </div>
    </div>
</el-collapse-transition>

我所用的业务没成功，可能简单div会成功吧，可以尝试一下。

3. 根据设定盒子height

通过设置盒子高度0-Xpx，并设置过渡动画transition: height .3s ease来实现。

不适用场景：这种情况最好知道折叠和展开的具体高度且高度不再变化，或者不动态变化，否则不推荐。