javascript - -enter-active および -leave-active クラスが Vue イベントのトグル中に表示されない

Question

何らかの理由で、私の webpack/vue-loader アプリケーションの HTML コードで -enter-active と -leave-active がデフォルトのタイムアウトで表示される場合、トランジション効果を作ることができません。

アニメーションの欠如に関するいくつかの問題に対処した後、Web プロジェクトのvue-guideから以下のコードをコピーして貼り付けました。以下のこの単純な例でさえ、まったく機能していません。

他の誰かがこの問題に遭遇していますか?

index.html

  <div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  </div>

私の main.js ファイル:

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

**上記のコードは、css クラスの fade-enter-active、.fade-leave-active を追加することで解決しました **

ただし、Vue.component で作成した画像スライダーでは、同じ原則が機能しません。コードは次のようになります。

var dataHome = { show: true,
                 currentNumber: 1,
                 images: ['image1.jpg',
                          'image2.jpg',
                          'image3.jpg',
                          'image4.jpg',
                          'image5.jpg']
                 }

const Home = {
  template: `<div class="box-container">
              <p><a @click="prev">Previous</a> || <a @click="next">Next</a></p>
              <transition name="fade">
                <div id="demo" v-if="show">
                  <img :src="images[Math.abs(currentNumber) % images.length]"/>
                </div>
              </transition>
            </div>`,
  data: function () {
    return dataHome  //dataset with images
  },
  methods: {
    next: function () {
      this.currentNumber += 1;
      this.show = true;
    },
    prev: function () {
      this.currentNumber -= 1;
      this.show = true;
    }
  }
 }