这一篇文章是面向解决问题,从问题,原理,解决方法入手,之前我们给出问题,没有剖析原理,这里就将剖析了
效果图.gif
一.问题
如果界面上有两个transition标签,也就是有两个需要执行动画的元素,那么如何让两个元素执行不同的动画呢
二.原理
让动画执行元素的原理是transition会自动添加v-enter等类名,让其中的指定元素执行类中定义的动画
三.解决方法
如果能 自定义动画的类名,给不同的transition元素自动添加不同的类名就能让不同的transition执行不同的动画了,我们这里给Transition标签添加name属性,通过nameValue-enter代替v-enter,就能给不同的transition添加不同的动画效果了
四.代码测试
样式.png
结构.png
