VUE学习-过渡 & 动画

过渡 & 动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 CSS 动画库，如 Animate.css
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡类

如果你使用一个没有名字的 <transition>，则 'v-' 是这些类名的默认前缀。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

自定义过渡类名

便于引入第三方动画库，自定义类名优先级高于普通的类名

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="demo">

	<button v-on:click="show = !show">Toggle</button>

	<transition name="fade" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">

		<p v-if="show">hello</p>

	</transition>

</div>

JS钩子函数

before-enter：function(el){ ... }，
enter：function(el , done){ ... }，
after-enter：function(el){ ... }，
enter-cancelled：function(el){ ... }，
before-leave：function(el){ ... }，
leave：function(el , done){ ... }，
after-leave：function(el){ ... }，
leave-cancelled：function(el)

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。

<transition>

name : 过渡名
enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-active-class ：指定过渡阶段类名
duration ：[ms | {enter: ms, leave: ms}]
mode: 过渡模式
- in-out：新元素先进行过渡，完成之后当前元素过渡离开。
- out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<transition-group>

不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。可以借助tag改成其他标签。
过渡模式不可用，因为我们不再相互切换特有的元素。即mode不适用。
内部元素总是需要提供唯一的 key attribute 值。
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
不仅可以进入和离开动画，还可以改变定位。
属性
- name：过渡名
- tag：设置标签
- enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-active-class ：指定过渡阶段类名
- move-class：在元素的改变定位中应用

巴特西