SOURCE

new Vue({
  data:{
	flag:true,
    flag2:true,
    
  },
  methods:{
   toggle(){
     
   }
  }
}).$mount('#app')

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
  <li> 1.使用transition标签包起来</li>
  <li> 2.显示元素的标签使用v-if或v-show用来切换显示和隐藏
</li>
  <li>  3.写css样式，四个状态和过渡的class
</li>
  <li>  4.绑定点击事件
</li>
  
 
  <br>
  <input type="button" value="toggle" @click="flag=!flag">
  
  <transition>
    <h1 v-show="flag">
      hello 
    </h1>
  </transition>
  <hr>
<input type="button" value="toggle" @click="flag2=!flag2">
   <transition name="hhc">
    <h1 v-show="flag2">
      hhc age
    </h1>
  </transition>
   
</div>

*{overflow:hidden;}
#app{
  margin:20px;
  text-align:center;
}
.v-enter{
  opacity:0;
  transform:translateX(-100px);
}
.v-leave-to{
	opacity:0;
  transform:translateY(100px);
}
.v-enter-active,
.v-leave-active{
  transition:ease-in-out all .5s;
}

//自定义的动画类名
//自定义的类名一定要写完整的四个状态，找不到原因，求大神告知 qwq
.hhc-enter-to,
.hhc-leave{
  //可以不写样式，但是这个类名一定要写，可能因为是自己定义的把
}
.hhc-enter,
.hhc-leave-to{
  opacity:0;
  transform:translateX(-100px);
}
.hhc-enter-active,
.hhc-leave-active{
  transition:all .3s;
}