vue+elementui实现el-input动画效果

最新推荐文章于 2023-09-09 15:52:39 发布

不想上班只想要钱

最新推荐文章于 2023-09-09 15:52:39 发布

阅读量1k

点赞数

分类专栏：前端 html 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Aa12364567/article/details/125916097

版权

前端同时被 2 个专栏收录

150 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

参照vue.js官网

      <transition-group name="box">
      这里放input等组件
      </transition-group>

<style>
/*定义离开过渡的开始状态*/
.box-leave{
  opacity: 1;
  height: 40px;
}
.box-leave-active{
  /* transition: height .5s ease; */
  /* animation: bounce-in .5s reverse; */
  transition: all .5s ;
  animation: bounce-out .5s ;
/* transition: all 10s ease; */
}
/*2.1.8 版及以上定义离开过渡的结束状态*/
.box-leave-to{
  opacity: 0;
  height: 0px;
  /* animation: bounce-in .5s reverse; */
}
/* 定义进入过渡的开始状态 */
.box-enter {
  opacity: 0;
  height: 0;
  /* animation: bounce-in .5s reverse; */
}
/* 定义进入过渡生效时的状态 */
.box-enter-active {
  transition: height .5s ;
  animation: bounce-in .5s;
}
/* 2.1.8 版及以上定义进入过渡的结束状态 */
.box-enter-to {
  opacity: 1;
  height: 40px;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
    /* transform: rotateX(0deg); */
  }
  100% {
    transform: scale(1);
    /* transform: rotateX(90deg); */
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
    /* transform: rotateX(0deg); */
  }
  100% {
    transform: scale(0);
    /* transform: rotateX(90deg); */
  }
}
</style>