个人笔记-----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...
·
<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>
更多推荐
已为社区贡献7条内容
所有评论(0)