27-Vue动画-自定义类名

这一篇文章是面向解决问题,从问题,原理,解决方法入手,之前我们给出问题,没有剖析原理,这里就将剖析了

效果图.gif

一.问题

如果界面上有两个transition标签,也就是有两个需要执行动画的元素,那么如何让两个元素执行不同的动画呢

二.原理

让动画执行元素的原理是transition会自动添加v-enter等类名,让其中的指定元素执行类中定义的动画

三.解决方法

如果能 自定义动画的类名,给不同的transition元素自动添加不同的类名就能让不同的transition执行不同的动画了,我们这里给Transition标签添加name属性,通过nameValue-enter代替v-enter,就能给不同的transition添加不同的动画效果了

四.代码测试

样式.png

结构.png