个人笔记-----Vue中transition的过渡作用和transition-group【如有不对，欢迎指正】

<transition>标签有两个属性，name 属性和 mode 属性。

transition里的 name 值fade 就是 .fade-enter-active,类名开头的 fade，

<transition name="fade" mode="out-in">
   <router-view/>
   <router-view class="left" name="nav" />
   <router-view class="right" name="con" />
</transition>
      
.fade-enter-active, .fade-leave-active {
  transition:opacity .4s;
}
.fade-enter, .fade-leave-to {
  opacity:0;
}

注意：transition 里面的<div key="c">111222</div>的内容是不显示，如果要显示内容需要把 transition 标签换成 transition-group 标签，
transition-group 标里的所有子元素都要有key值，不然过渡效果是显示不出来的，而且每个子元素标签的key值是不一样的，不能重复。

<transition-group name="aaa" mode="in-out">
    <router-view key="d"/>
    <router-view class="left" name="nav" key="a" />
    <router-view class="right" name="con" key="b" />
    <div key="c">111222</div>
</transition-group>