vue2 的 过渡（动画）效果

1、在过渡 效果的使用中 ，key属性需要注意 ： 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。       参考官方说明：  https://cn.vuejs.org/v2/api/#key

　 注： v-if（v-if-else）条件 渲染中 过渡没有效果，最好检查 是不是 key 没有设置（自己开发时遇到过这个问题，没有设置 不同的key值，结果切换时没有过渡效果）。

2、vue 过渡 效果 使用。 官方文档：https://cn.vuejs.org/v2/guide/transitions.html  和 https://cn.vuejs.org/v2/api/#transition（大纲介绍）

　 注意：具体的动画效果需要自己在css中设置的。有规定的 css类名，页可以自定义相应的类名。

　transition常用属性（Props）：name、appear、mode（控制离开/进入的过渡时间序列，先出后进会比较协调）

　 

3、vue的过渡组件，在进入/离开的过渡中，会有 6 个 class 切换。这6个class类名，都已经定义好了，只有前缀是自己定义的。

　  类名虽然固定了，但是css还是要自己写的。如：

<div >
  <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;
}

4、