原理很简单,就是给指定的元素在显示与隐藏时添加相应类名,我们可以通过这些类名去定义动画

# 使用animation配合@keyframes实现

按照以下步骤即可实现:

1. 定义 @keyframes

   @keyframes test {
     from{
       // ...
     }
     to{
       // ...
     }
   }

2. 将要实现动画的元素使用Vue内置的 transition 标签包裹

   <transition>
     <h1 v-show="condition">Test</h1>
   </transition>

3. 添加类名样式

   .v-enter-active{
     animation: test 1s linear;
   }
   .v-leave-active{
     animation: test 1s linear reverse;
   }

补充:

1.默认类名才是v-开头,如果想自定义需要给对应元素包裹的 transition 标签添加name属性,则该动画对应类名的v-被替换为指定的name属性值

2.如果想组件初始化加载enter动画需要给对应元素包裹的 transition 标签添加appear属性

# 使用animation配合transform实现

.v-enter,.v-leave-to{
  // transform: ;
}
.v-enter-active,.v-leave-active{
  transition: 1s linear;
}
.v-enter-to,.v-leave{
  // transform: ;
}

如果想多个元素同时实现动画效果可以使用 transition-group 标签进行包裹

<transition-group>
  <h1 v-show="isShow" key="test1">Test</h1>
  <h1 v-show="isShow" key="test2">Test</h1>
</transition-group>

这里的key必须要加上的,否则会报错,如v-for

本文完