使用css实现打开抽屉效果（css过渡动画）

关注

原创最新推荐文章于 2026-06-11 11:41:47 发布 456 阅读 AI 写同款· GEO 优化 ›

前端笔记：基于Dialog自定义实现类似抽屉效果文章摘要：本文介绍了在Vue2项目中基于ElementUI的Dialog组件实现抽屉效果的解决方案。由于项目使用的ElementUI 2.10.1版本不支持官方抽屉组件，作者通过自定义CSS定位和动画效果（使用transform和transition实现从右向左滑动），结合JS逻辑控制展示状态，成功模拟了抽屉功能。文章提供了完整的代码示例，包括响应式设计和多种宽度选项，并建议新项目直接升级框架使用原生el-drawer组件。阅读详情

方法一、使用高度方式，高度从0到展示进行过渡
html：

 <div class="container">
       <div class="menu">菜单</div>
       <div class="box">
       </div>
    </div>

css:

  .box {
        width: 400px;
        height: 0;
        background-color: red;
        transition: all 1s ease;
      }
      .menu{
        height: 50px;
      }
      .menu:hover ~ .box{
        height: 300px;
      }

方法二、使用定位方法，相对较麻烦
HTML代码：

 <div class="container">
       <div class="menu">菜单</div>
       <div class="box">
          <div class="drawer"></div>
       </div>
    </div>

css

.container{
        background-color: #fff;
      }
      .box{
        position: relative;
        overflow: hidden;
      }
       .drawer {
        width: 400px;
        height: 300px;
        background-color: red;
        overflow: hidden;
        position: absolute;
        top: -300px;
        transition: all 1s ease;
      }
      .menu{
        height: 50px;
      }
      .menu:hover ~ .box{ /* 悬浮时，在此处绘制容器宽高，可以避免在抽屉未打开时，占用高度 */
        width: 400px;
        height: 300px;
      }
      .menu:hover ~ .box .drawer{
        top: 0px;
      }