vue--transition-group
1.为什么要使用<transition-group>
<transition></transition>是vue封装的过渡组件
<transition name="fade" mode="out-in"> //mode="out-in"模式先出后进
<router-view></router-view>
</transition >
css
.fade-enter-active, .fade-leave-active { transition: opacity .4s } .fade-enter,.fade-leave-to { opacity: 0 }
这个组件里只有一个元素,当我们在其里面多加一具元素时,发生了什么
浏览器里并不出现新加的内容。这是为什么?因为在vue里,<transition></transition>里只能放置一个元素
但是如果我们想在一个过渡效果里放置多个元素时,怎么办
用<transition-group></transition-group>
2.<transition-group>的key属性
当我们将<transition></transition>改成<transition-group></transition-group>,发现控制台里依然有错误提示—当<transition-group>里有多个元素时,需要给每个元素设置key值,并且每个key值是不能一样的。设置完后,页面就恢复正常了。
<transition-group name="fade" mode="out-in"> <router-view key="aa"></router-view> <div key="bb">merry christmas</div> </transition-group>
3.<transition>和<transition-group>的区别
<transition>里只能包裹一个元素
<transition-group>可以包裹多个元素
4.使用<transition-group>需要注意的点是
包裹的元素必须要设置key值
Key值不能设置成一样的