轻松掌握vue动画

vue动画

1. vue把一个完整的动画分为两部分，入场动画和离场动画；

2. 在入场动画中包含两个时间点，分别是入场前（v-enter）和入场后(v-enter-to);

3. v-enter表示入场前的状态，例如透明度为1，偏移量为0px;

4. v-enter-to表示动画入场完成后的终止状态，例如透明度为0，偏移量为100px；

5. v-enter-active表示入场动画的时间段，在这里我们可以定义动画的时常，动画的运动相关的效果，例如ease等动画运动曲线;

用法

1. 导入vue.js；

2. 把要实现动画的元素使用transition元素进行包裹，给transition元素添加name属性来标识不同的动画；

3. 要实现的动画元素，必须使用v-if或者v-show来进行控制；

<button @click="flag = !flag">animation toggle button</button>
<transition name="fade">
    <div v-show="flag"> hello world </div>
</transition>

4. 根据transition元素的name来定义两组动画；

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translate(100px, 100px); /*动画起始状态和动画完成状态*/
}
.fade-enter-active,
.fade-leave-active {
    transition: all 5s ease; /* 定义动画效果和时长 */
}

第三方动画库

1. 导入第三方动画库 animate.css；

2. 打开animate.css库官网,选择你想要的效果，例如jackInTheBox和hinge；

3. 在transition元素中添加属性enter-active-class和leave-active-class，值为你想要动画效果的类名；

4.给被transition元素包裹的最外层元素添加一个类名animated;

<transition enter-active-class="jackInTheBox" leave-active-class="hinge">
     <h1 v-show="otherCSSAnimation" class="animated">hello world</h1>
</transition>