Vue過渡動畫運用transition

vue的過渡動畫，主要是transition標簽的使用，配合css動畫實現的。官方文檔css過渡

通過點擊事件來切換show的值來改變顯示的文本，下面的css通過進入離開時的在勻速狀態下xxs（秒）下來轉換在x軸上位移的距離， transition包括的是位移的內。key是必須有的，用來標記位移的哪一個，這個方法有一點，用v-if時會頻繁的建立銷毀。name是你定義的名字必須有，和css里面的名字是保持一致的，你可以自定義名字。

使用它時有時候切換的並不是標簽，而是一個組件，這時候應該使用transition-group來包括。

<template>
   <div>
    　　<div>
       　　<span @click="show = 0">第一個</span>
          <span @click="show = 2">第二個</span>
          <span @click="show = 3">第三個</span>
       </div>
       <transition-group name="slide">
       　　<div v-show="show == 0" key="0">第一個文本</div>
          <div v-show="show == 2" key="2">第二個文本</div>
          <div v-show="show == 3" key="3">第三個文本</div>
       </transition-group>
   </div>
</template>
<script>
   export default {
      data () {
      　　return {
            show:0
          }
      }
  }
</script>
<style>
   .slide-enter-active{
 　　　　transition:all .5s linear;
   }
   .slide-leave-active{
        transition:all .1s linear;
   }
   .slide-enter{
        transform: translateX(-100%);
        opacity: 0;
   }
   .slide-leave-to{
       transform: translateX(110%);
       opacity: 0;
   }
</style>