<transition 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 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 :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 :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中标签中动画发生变化，都会有一个过渡效果