过渡 & 动画
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/[email protected]" 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:在元素的改变定位中应用