Vue中CSS动画原理的实现

appear // 加上 appear 属性
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing" //使用自定义属性 appear-active-class 就可以实现
<div v-if="show">hello world</div>
</transition>

如需要在一进入就有动画，需要借助两个自定义属性：appear、appear-active-class来实现，看上面代码。

过渡transition和动画animation同时使用

当同时使用transition和animation动画时，动画时长是由谁来确定呢？

Vue 提供了可手动设置，看下面代码

<transition name="fade"
  type="transition"    //可手动设置动画时长以 transition 为准
  appear
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"
  <div v-if="show">hello world</div>
</transition>

在transition标签中，可以使用type属性，它的用途是：如果同时有transition和animation时，此时将type设置为transition，它就以transition动画时长为准。

回到代码，现在需要自己定义动画的时长，该怎么实现呢？

<transition name="fade"
  :duration="10000"    //动画总时长为 10s
  appear
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"
  <div v-if="show">hello world</div>
</transition>

Vue 提供了duration的属性，可以自定义动画时长。

这个自定义动画时长，还可以设置的复杂一点：

<transition name="fade"
  :duration="{enter:5000,leave:10000}"    //可分别设置 enter 动画时长和 leave 动画时长
  appear
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"
  <div v-if="show">hello world</div>
</transition>

最后

在transition标签中中不光v-if能控制显示隐藏，v-show也能控制显示隐藏，甚至动态组件也行。只要在transition中标签中动画发生变化，都会有一个过渡效果