个人笔记-----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>