Vue(五)动画

2.0用 transition 组件

<transition name="fade">
    运动东西(元素，属性、路由....)
</transition>

class定义:
.fade-enter{}    //初始状态
.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)

.fade-leave{}
.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

 

transition有一下属性用于配合过渡，函数自己在vue的data段中声名

 

配合animated使用

如何animate.css配合用？
            <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
                <p v-show="show" class="animated"></p>
            </transition>

多个元素时

        <transition-group enter-active-class="" leave-active-class="">
            <p :key=""></p>
            <p :key=""></p>
       </transition-group>