Vue动画

vue提供 <transition> 和 <transition-group> 标签，管理动画。

transition

<transition> 不会渲染成真实元素，只能包含一个子元素。

常规形式

isShow: true

<button @click="isShow = !isShow">显示/隐藏</button>

<transition name="xxx">
    <!-- v-show 和 v-if 效果一样 -->
    <h1 v-show="isShow">动画元素</h1>
</transition>

1. 点击按钮，<h1>隐藏，自动添加两个类样式 xxx-leave-active、xxx-leave-to
2. <h1>完全隐藏完毕，即动画执行完毕，又会移除这两个类
3. 再次点击按钮，<h1>显示，自动添加两个类样式 xxx-enter-active、xxx-enter-to
4. <h1>完全显示完毕，即动画执行完毕，又会移除这两个类

<style>
/* active 通常是设置过渡中的效果、时间、曲线 */
.xxx-leave-active, .xxx-enter-active {
    transition: all 2s linear;
}
/* 进入开始状态 */
.xxx-enter {
    opacity: 0;
}
/* 进入结束状态 */
.xxx-enter-to {
    opacity: 1;
}
/* 进入离开状态 */
.xxx-leave {
    opacity: 1;
}
/* 进入离开状态 */
.xxx-leave-to {
    opacity: 0;
}
</style>

简写形式

<h1>默认opacity: 1，那么只需要设置opacity: 0的情况

/* active 通常是设置过渡中的效果、时间、曲线 */
.xxx-leave-active, .xxx-enter-active {
    transition: all 2s linear;
}
.xxx-enter, .xxx-leave-to {
    opacity: 0;
}

自定义CSS动画

比较推荐 设置CSS动画的方式实现

1. 注册动画

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bounce-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(0);
    }
}

2. 设置CSS类

/* active 通常是设置过渡中的效果、时间、曲线 */
.xxx-enter-active {
    animation: bounce-in 2s linear;
}
.xxx-leave-active {
    animation: bounce-out 2s linear;
}

配合CSS库

配合第三方CSS动画库时，就不能使用name属性了，因为需要自定义类名。
<transition>注入类名的属性：enter-class、enter-to-class、enter-active-class ...
第三方CSS动画库：animate.css

<transition 
    enter-active-class="animated tada"
    leave-active-class="animated bounceOut">

搭配多个元素

<transition>只能有一个子元素，但可以通过 v-if 控制子元素只有一个。

<transition name="xxx" mode="out-in">
    <h1 v-if="isShow" key="1">动画元素-1</h1>
    <h1 v-else key="2">动画元素-2</h1>
</transition>

• key的作用：如果子元素是同一种类型的标签，Vue为了提高渲染性能，会复用同一个标签，这就会导致动画无效，只有生硬的切换显示。
  key在Vue的DOM Diff过程中作为唯一标记，只有key值相同才会复用。
• mode：过渡模式，控制谁先执行。默认两个子元素的动画会同时执行，非常混乱。
  • in-out 新元素先过渡，完成之后，当前元素过渡离开
  • out-in 当前元素先动画过渡，完成之后，新元素过渡进入

JS控制动画

<transition>还提供了勾子函数，控制元素的状态

before-enter、before-leave、before-appear
enter、leave、appear
after-enter、after-leave、after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

第三方JS动画库velocity.min.js

<transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    :css="false"
>
    <h1 style="position:absolute;">动画元素</h1>
</transition>
<script>
beforeEnter(el, done) {
    // el 表示当前动画作用的元素
    // done 动画立即完成，所以应该等待动画完成后在调用done
}
enter(el, done) {
    Veloctity(el, 
        { right: '200px' },
        { duration: 1000 },
        { complete: done }
    );
}
leave(el, done) {
    Veloctity(el, 
        { right: '-200px' },
        { duration: 1000 },
        { complete: done }
    );
}
</script>

:css="false" 表示禁用CSS的影响（防止一些隐患），只是用JS动画

初始渲染的过渡

appear 初始渲染时立即使用过渡，比如刷新页面时，首次动画就要执行

<transition 
    appear
    appear-active-class="animated bounceOut"
>

对应勾子函数：before-appear、appear、after-appear、appear-cancelled(取消动画)

transition-group

<transition-group> 动画组，支持设置一组子元素的动画效果。
它会渲染成一个真实元素，标签类型通过tag属性控制，默认是<span>
动画组内的子元素必须设置唯一的key，动画才能正常工作。

• 事件与<transition>相同
• 属性除了mode，其他的与<transition>相同，另外还有tag、move-class

<button @click="handleAdd">添 加</button>
<transition-group tag="ul" name="xxx">
    <li v-for="(item, index) in dataList" :key="item.id">
        <label>{{item.label}}</label>
        <button @click="handleDelete(index)">删 除</button>
    </li>
</transition-group>