css实现抽屉动画 div显示隐藏的过渡效果

效果如图

由于列表是循环出来的，所以判断抽屉的打开和关闭由一个自定义数组决定。当数组的该项为1时打开，打开时显示hideShita样式，反之显示element样式

<div :class="flagList[i] == 1 ? 'hideShita' : 'element'">
        //里面是抽屉里的内容
</div>

 控制抽屉的大小动画的时间，简单的抽屉开关就做好了。修改后放在自己的项目里面吧。

<style>
.hideShita {
  max-height: 70px;
  overflow: hidden;
  transition: max-height 0.5s;
}

.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
}
</style>