VUE实现折叠展开动画效果

最新推荐文章于 2024-07-21 14:04:58 发布

天使的同类

最新推荐文章于 2024-07-21 14:04:58 发布

阅读量2.8k

点赞数 2

分类专栏： vue.js 文章标签： vue.js css

本文链接：https://blog.csdn.net/summer_jk/article/details/124431339

版权

vue.js 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

VUE实现折叠展开动画效果

第一种情况：从中间向两边展开效果（水平缩放）

.input-search {
  position: absolute;
  bottom: 8px;
  right: 0px;
  width: auto;
  animation: mymove 0.5s infinite;
  animation-iteration-count: 1;
  border: none;
  .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}
@keyframes mymove {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

效果如图：

折叠搜索框

第二种：从右往左展开效果（改变元素宽度）

.inputDiv {
  width: auto;
  height: 32px;
  position: absolute;
  bottom: 8px;
  right: 0px;
  border-radius: 4px;
  overflow: hidden;
  animation: mymove 0.3s infinite;
  animation-iteration-count: 1;
  .input-search {
    width: auto;
    border: none;
    .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
}
@keyframes mymove {
  from {
    width: 0px;
  }
  to {
    width: 213px;
  }
}