VUE学习-过渡 & 动画

过渡 & 动画

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

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

过渡类

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

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. 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：在元素的改变定位中应用