vue纯CSS开发侧边栏抽屉打开关闭动画样式_vue抽屉动画

作者：编程领航者 | 2024-01-29 14:25:28

踩

vue抽屉动画

纯CSS开发侧边栏抽屉打开关闭动画样式

不会截屏动态样式,动画效果可以参考el-drawer的效果,废话不多说,直接上代码


// HTML片段
<section class="drawer" :style="{'width': isShowDrawer? '600px' : '0px'}">
   <!-- 关闭按钮 -->
   <div class="closeBtn" @click="isShowDrawer = !isShowDrawer">
     <i class="el-icon-close"></i>
   </div>
</section>

// JS片段
isShowDrawer: false, // 定义关闭按钮

// CSS片段
.drawerShow {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  height: calc(100vh - 70px);
  border-radius: 4px 0px 0px 4px;
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px #14161b;
  // 主要靠下面两行实现效果
  overflow: hidden;  // 很重要!!!!
  transition: 0.3s ease;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/43221