我們給transition name屬性定義的是fade 所以是下面名稱：
fade-enter fade-enter-to fade-enter-active
fade-leave fade-leave-to fade-leave-active
如果我們沒有給transition定義name屬性，用默認的那么就是：
v-enter v-enter-to v-enter-active
v-leave v-leave-to v-leave-active

進場動畫原理

剛開始存在fade-enter和fade-enter-active
緊接第二幀的時候，fade-enter消失、fade-enter-to 出現
到最后的時候fade-enter-to消失、fade-enter-active消失

離開動畫原理

剛開始存在fade-leave和fade-leave-active
緊接第二幀的時候，fade-leave消失、fade-leave-to 出現
到最后的時候fade-leave-to消失、fade-leave-active消失

//css動畫效果（css過度動畫效果）
<style>
    .fade-enter {
      opacity: 0;
    }
    .fade-enter-active {
      transition: opacity 1s;
    }

    .fade-leave-to {
      opacity: 0;
    }
    .fade-leave-active{
      transition: opacity 1s;
    }
  </style>

<div id="root">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>

    <button @click="handleClick">toggle</button>
  </div>
  <script>
    var app = new Vue({
      el: '#root',
      data: {
        show: true
      },
      methods: {
        handleClick: function () {
          this.show = !this.show;
        }
      }
    })
  </script>

ps:
顯示操作
剛開始fade-enter opacity為0 第二幀fade-enter消失 opacity變為1 這個過程一直在fade-enter-active 監聽1秒時間
隱藏操作
剛開始fade-leave opacity 默認是1 第二幀 fade-leave消失 fade-leave-to出現 opacity 變為0 這個過程一直在fade-leave-active監聽1秒時間后消失

更多

上一篇：第5章 Vue 表單
下一篇：第7章 Vue 路由
全篇文章：Vue學習總結
所有章節目錄：Vue學習目錄