transition name="fade">  

     <p v-show="show"></p>  

     //运动东西（元素，属性，路由）  

</transition>  

 class定义：  

   .fade-enter{}   //初始状态  

   .fade-enter-active {} //变化成什么样->当元素显示出来  

   .fade-leave{}  

   .fade-leave-active{}  //变成什么样->当元素离开  

<transition></transition>组件里面的事件： 

@before-enter  动画进入之前

@enter 动画进入

@after-enter  动画进入之后

@before-leave 动画离开之前

@leave 动画离开

@after-leave  动画离开之后

如何配合animate.css使用

  1 引入animate.css

  2  需注意：animated 配合

[html] view plain copy

enter-active-class="bounceInLeft" leave-active-class="bounceOutRig”使用  eg:  

[html] view plain copy

<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">  

          <p v-show="show" class="animated"></p>  

</transition>  

<transition></transition>只能让一组元素去运动，如果用多组元素用<transiton-group></transition-group>。