进入/离开 & 列表过渡
一、概述
1、Vue 在插入、跟新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
1)在 CSS 过渡和动画中自动应用 class
;
2)可以配合使用第三方 CSS 动画库,如 Animate.css;
3)在过渡钩子函数中使用 JavaScript 直接操作 DOM;
4)可以配合使用第三方 JavaScript 动画库, 如 Velocity.js;
二、单元素/组件的过渡
1、Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡:
1)条件渲染(使用 v-if)
2)条件展示(使用 v-show)
3)动态组件
4)组件根节点
2、当插入或删除包含在 transition 组件中的元素时,Vue 会做以下处理:
1)自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名;
2)如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用;
3)如果没用找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同);
3、过渡的类名
1)在进入/离开的过渡中,会有 6 个class 切换:
(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
被删除),在过渡/动画完成之后移除;
2)对于这些在过渡中切换的类名来说,如果使用一个没有名字的 <transition>
,则 v- 是这些类名的前缀。如果使用了类似于 <transition name=“my-transition”>
,那么 v-enter
会替换为 my-transition-enter
;
3)v-enter-active
和 v-leave-active
可以控制进入/离开过渡的不同缓和曲线;
4、css 过渡
1)常用的过渡都是使用 css 过渡,将需要设置过渡的内容,包裹在 <transition>
标签内,在使用 css 对过渡效果进行设置;
5、css 动画
1)css 动画用法同 css 过渡,区别是在动画中 v-enter
类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除;
6、自定义过渡的类名
1)Vue 提供以下 attribute 来自定义过渡类名:
(1)enter-class
(2)enter-active-class
(3)enter-to-class
(2.1.8+)
(4)leave-class
(5)leave-active-class
(6)leave-to-class
(2.1.8+)
2)以上自定义过渡类名的优先级高于普通的类名,该规则方便 Vue 的过渡系统和第三方 CSS 动画库,如 Animate.css 的结合使用;
Vue官方文档学习笔记(三)过渡&动画及可复用性
最新推荐文章于 2024-06-11 20:47:04 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)