<div id="app1">
  <button @click="show = !show">toggle</button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el:'#app1',
  data:{
    show:true
  }
})

.fade-enter-active, .fade-leave-active{
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

<div id="app2">
  <button @click="show = !show">toggle css</button>
  <transition name="slide-fade">
    <p v-if="show">CSS 过渡</p>
  </transition>
</div>

new Vue({
  el:'#app2',
  data:{
    show:true
  }
})

    .slide-fade-enter-active{
      transition: all .3s ease;
    }
    .slide-fade-leave-active{
      transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .slide-fade-enter, .slide-fade-leave-to{
      transform: translateX(100px);
      opacity: 0;
    }

<div id="app3">
  <button @click="show = !show">toggle css</button>
  <transition name="bounce">
    <p v-if="show">css 动画</p>
  </transition>
</div>

new Vue({
  el:'#app3',
  data:{
    show:true
  }
})

    .bounce-enter-active{
      animation: bounce-in .5s;
    }
    .bounce-leave-active{
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0%{
        transform: scale(0);
      }
      50%{
        transform: scale(1.5);
      }
      100%{
        transform: scale(1);
      }
    }

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
<div id="app4">
  <button @click="show = !show">toggle coustom class</button>
  <transition name="bounce"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight">
    <p v-if="show">自定义过渡类名</p>
  </transition>
</div>

new Vue({
  el:'#app4',
  data:{
    show:true
  }
})

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled">
 <!-- ... -->
</transition>

methods: {
 // --------
 // 进入中
 // --------
 beforeEnter: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 离开时
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}

<div id="app5">
  <button @click="show = !show">toggle hook</button>
  <transition @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
  :css="false">
    <p v-if="show">javascript 钩子使用</p>
  </transition>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
  el:'#app5',
  data:{
    show:false
  },
  methods:{
    beforeEnter:function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter:function (el, done) {
      Velocity(el, {opacity:1, fontSize:'1.4em'}, {duration:300})
      Velocity(el, {fontSize:'1em'}, {complete:done})
    },
    leave:function (el, done) {
      Velocity(el, {translateX:'15px', rotateZ:'50deg'}, {duration:600})
      Velocity(el, {rotateZ:'100deg'}, {loop:2})
      Velocity(el,{
        rotateZ:'45deg',
        translateY:'30px',
        translateX:'30px',
        opacity:0
      }, {complete:done})
    }
  }
})
</script>

<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class"
 appear-active-class="custom-appear-active-class">
 <!-- ... -->
</transition>

<transition
 appear
 v-on:before-appear="customBeforeAppearHook"
 v-on:appear="customAppearHook"
 v-on:after-appear="customAfterAppearHook"
 v-on:appear-cancelled="customAppearCancelledHook"
>
 <!-- ... -->
</transition>

<!--初始渲染-->
<div id="app6">
  <transition appear
        appear-active-class="animated tada">
    <p>初始画面</p>
  </transition>
</div>

new Vue({
  el:'#app6',
  data:{
    show:true
  }
})