官方Demo地址

起因

在寫vue動畫的時候參考官方給的demo發現只有進入動畫沒有離開動畫。下面是官方程式碼。

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

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

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

無論怎麼改動發現都不生效，於是先不研究，然後複製了第二demo，即css過渡，發現這個程式碼的進入動畫和離開動畫都生效了，百思不得其解，然後就在這個基礎上改動，複製了第一個demo的程式碼，並且生效了（如下）

.slide-fade-enter-active {
  transition
 
: all .3s ease;
}
.slide-fade-leave-active {
 transition: opacity .5s;
}
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.slide-fade-leave-to{
 opacity: 0;
}

仔細對比了兩個css的區別發現只有在transition上name的名字有差異，於是想是不是第一個demo不能直接fade命名，於是在前面增加了test，發現確實可以了。程式碼如下。

 .test-fade-leave-active{
        transition: opacity 5s;
    }
    .test-fade-leave-to {
        opacity: 0;
    }

不清楚原因，望有人看到可以幫忙解釋一下。