官方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;
    }

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