一、概述
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
二、单元素、组件的过渡
Vue 提供了 transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if
) - 条件展示 (使用
v-show
) - 动态组件
- 组件根节点
下面我们来一个简单的示例:
点击按钮 让hello Vue显示或隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue-2.6.12-min.js"></script>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity .5s;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">
切换
</button>
<transition >
<p v-if="show">hello Vue</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
当插入或删除包含在 transition
组件中的元素时,Vue 将会做以下处理:
-
自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
-
如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
-
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。
过渡的类名:
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
被删除),在过渡/动画完成之后移除。
自定义过渡类名:
在transition
组件中,如果没有带name属性
,编写样式前缀默认为v-
<transition></transition>
//写法
v-enter{
/*--样式--*/
}
如果带有name属性
,则将默认v-前缀
改为自定义的name属性名
<transition name="my"></transition>
//写法
my-enter{
/*--样式--*/
}
三、animate.css的使用
有时候为了实现一些复杂的动画效果,要写很多代码,看得头晕目眩;怎么样才能不用写那么多代码,又能实现酷炫的动画效果呢?
animate.css库来帮你!它和我们自己使用css的keyframe效果是一样的,只是封装好了方面我们使用(搬砖)。。那怎么用css库呢?
(1)首先,animate官网下载animate.css文件到代码文件中;
(2) 然后,html页面通过link标签引入animate.css;
(3)最后,使用动画库animate.css需要注意:
需要使用自定义class名字的形式
class类里需要包含animated类
根据入场出场的不同方式,使用不同动画效果
<transition name="my"
enter-active-class="animated shake"
leave-active-class="animated swing">
<div v-if="show">hello</div>
</transition>