vue animation css实现左右折叠面板

weixin_38797742

已于 2022-03-25 11:33:04 修改

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue CSS 文章标签：前端 vue css3

于 2022-03-25 11:32:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38797742/article/details/123731479

vue 同时被 2 个专栏收录

23 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

本文介绍了一个使用Vue实现的折叠面板动画效果，包括面板的显示与隐藏动画及按钮的显示隐藏动画。通过设置不同的动画类名，实现了平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="left" :class="boxshow ? 'a1': 'a2'" id="showBox">
  这里是折叠面板的内容
</div>
<i id="left" class="el-icon-d-arrow-left" @click="boxshow = !boxshow" :class="boxshow ? 'a3': 'a4'"></i>
<i id="right" class="el-icon-d-arrow-right" @click="boxshow = !boxshow" :class="boxshow ? 'a5': 'a6'"></i>

boxshow: true

watch: {
    boxshow(val){
      if(!val){
        // 要确定渲染完了才可以读取dom节点
        setTimeout(() => {
          document.getElementById('showBox').style.display = 'none'
          document.getElementById('left').style.display = 'none'
          document.getElementById('right').style.display = 'block'
        }, 1800)
      }else{
        document.getElementById('showBox').style.display = 'block'
        document.getElementById('left').style.display = 'block'
        document.getElementById('right').style.display = 'none'
      }
      
    }
  },

.left{
    // 动画显示的最大宽度
    width: 230px;
}
// 面板内容显示隐藏动画
@keyframes out1{
  0%   {width: 230px;opacity: 1;}
  25%  {width: 150px;opacity: 0.8;}
  50%  {width: 100px;opacity: 0.6;}
  75%  {width: 50px;opacity: 0.3;}
  100% {width: 0px;opacity: 0;}
}
@keyframes in1{
  0%   {width: 0px;opacity: 0;}
  25%  {width: 50px;opacity: 0.3;}
  50%  {width: 100px;opacity: 0.6;}
  75%  {width: 150px;opacity: 0.8;}
  100% {width: 230px;opacity: 1;}
}
.a1{
  animation: in1 2s linear;
}
.a2{
  animation: out1 2s linear;
}
// 按钮显示隐藏动画  16px 是 按钮的宽度
@keyframes l1{
  0%   {width: 0px;left: 0px;opacity: 0;}
  50%  {width: 10px;left: 100px;opacity: 0.5;}
  100% {width: 16px;left: 250px;opacity: 1;}
}
@keyframes l2{
  0%   {width: 16px;left: 250px;opacity: 1;}
  50%  {width: 10px;left: 100px;opacity: 0.5;}
  100% {width: 0px;left: 0px;opacity: 0;}
}
@keyframes r1{
  0%   {width: 0px;left: 0px;opacity: 0;}
  50%  {width: 10px;left: 0px;opacity: 0.5;}
  100% {width: 16px;left: 0px;opacity: 1;}
}
@keyframes r2{
  0%   {width: 16px;left: 0px;opacity: 1;}
  50%  {width: 10px;left: 0px;opacity: 0.5;}
  100% {width: 0px;left: 0px;opacity: 0;}
}
.a3{
  // 左进 true 
  animation: l1 2s linear;
}
.a4{
  // 左出
  animation: l2 2s linear;
}
.a5{
  // 右进 false 
  animation: r1 2s linear;
}
.a6{
  // 右出
  animation: r2 2s linear;
}
.el-icon-d-arrow-left, .el-icon-d-arrow-right{
  position: absolute;
  top: 50%;
  left: 250px;
  z-index: 99;
  background-color: white;
  height: 100px;
  line-height: 100px;
}
.el-icon-d-arrow-right{
  left: 0px;
  display: none;
}