Vue2.0过渡动画效果transition

今天在做关于Vue项目时,遇到的问题,因为Vue1.0和Vue2.0的过渡效果完全不同了,Vue1.0是作为属性设置,而Vue2.0是作为元素<transition>包裹

引用官网的图:

经多次尝试,我最终理解:

一开始,需设置v-enter-active和v-leave-active这两个过渡效果的属性值(例:transition: all .5s ease这样)

然后,我们需设置的只有是v-enter和v-leaver-active这两个值(就是粉红的框的值)

而我们元素本身定义的CSS属性则为固定/基础属性(就是红色的框的值)

如还是不明白:可看以下代码:

这里定义transition属性name值

这是detail的设置,对应上面所说,应该就明白了