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

最新推荐文章于 2024-03-07 16:42:31 发布

神奇岁岁

最新推荐文章于 2024-03-07 16:42:31 发布

阅读量1.8k

点赞数 5

文章标签： css

本文链接：https://blog.csdn.net/weixin_50255994/article/details/126507883

版权

纯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;
}