Vue官方文档（28):使用transition组件中的钩子函数

<template>
 <div >

  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">



<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade" 
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"

    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

 </div>


</template>

 <script>
 
 //import Vue from 'vue'


  export default{
    components: { 

    },
    data() {
      return {
        show: true,
              }
            },
    methods:{
      beforeEnter(){
        alert("before enter......")
      },
      enter(){
        alert("enter......");
      },
      afterEnter(){
        alert("after enter......")
      },
            beforeLeave(){
        alert("before leave......")
      },
      leave(){
        alert("leave......");
      },
      afterLeave(){
        alert("after leave......")
      }
      
    }
  }
      
    </script>

<style >

.fade-enter-active, .fade-leave-active {
  transition: opacity 3.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.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);
  }
}
  

</style>