Vue 提供了transition
组件,在下列情形中,可以给任何元素和组件添加进入/离开的过渡动画:
-
条件渲染 (使用
v-if
) -
条件展示 (使用
v-show
) -
动态组件
-
组件根节点
1. 添加动画的类名
在进入/离开的过渡中,会有 6 个 class 切换。
-
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
被删除),在过渡/动画完成之后移除
2. 使用
2.1 transition 实现
根据上述的6个类名给元素添加切换动画的效果
(1)给元素添加动画
<!-- 切换显示和隐藏 -->
<button @click="show = !show">点击显示和隐藏</button>
<!-- vue 提供了transition标签,使开发者对内部有切换状态的元素添加动画 -->
<transition>
<p v-if="show">hello</p>
</transition>
(2)添加动画切换的类
/* 定义入场动画起始状态的样式 */
.v-enter{
opacity: 0;
}
/* 定义入场动画终止状态的样式 */
.v-enter-to{
opacity: 1;
}
/* 定义入场动画过渡效果 */
.v-enter-active{
transition: all 5s;
}
/* 定义出场动画起始状态的样式 */
.v-leave{
opacity: 1;
}
/* 定义出场动画终止状态的样式 */
.v-leave-to{
opacity: 0;
}
/* 定义出场动画过渡效果 */
.v-leave-active{
transition: all 3s;
}
2.2 animation 实现
动画的用法类似于过渡,区别是动画是在定义动画帧时书写起始到结束的状态,不借助v-enter
,v-enter-to
,v-leave
,v-leave-to
类名,只需要将定义好的动画帧通过animation
添加到v-enter-active
和v-leave-active
中去即可。
在动画中v-enter
类名在节点插入 DOM 后不会立即删除,而是在animationend
事件触发时删除。
(1)给元素添加动画
<!-- 添加显示和隐藏 -->
<button @click="show = !show">Toggle show</button>
<transition>
<p v-if="show">hello</p>
</transition>
(2) 添加动画切换的类
/* 定义入场动画过渡效果 */
.v-enter-active {
animation: bounce-in .5s;
}
/* 定义出场动画过渡效果 */
.v-leave-active {
animation: bounce-in .5s reverse;
}
/* 定义动画帧,里面有元素的起始状态和终止状态 */
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
3. 命名动画
如果想让页面内有多个动画效果,我们需要给 transition 标签添加name
属性,从而可以定义不同的动画,添加过name
属性之后,上面提到的6个类名就更换为:name-xxx
这种形式。
...
<!-- 添加了 name 属性 -->
<transition name="fade">
<p v-if="show">hello</p>
</transition>
/* 类名从默认的 v-xxx 改为 name-xxx 形式 */
.fade-enter{}
.fade-enter-to{}
.fade-enter-active{}
.fade-leave{}
.fade-leave-to{}
.fade-leave-active{}
4. 使用动画插件
在使用animation
实现过渡动画的时候,每次都需要我们自己来定义动画。vue 允许我们使用第三方动画库如:animate.css,我们可以通过以下 attribute 来自定义过渡类名:
标签属性 | 作用 |
---|---|
enter-class | 自定义入场起始样式类名,即 v-enter |
enter-active-class | 自定义动画效果类名,即 v-enter-active |
enter-to-class (2.1.8+) | 自定义入场终止样式类名,即 v-enter-to |
leave-class | 自定义出场起始样式类名,即 v-leave |
leave-active-class | 自定义出场动画效果类名,即 v-leave-active |
leave-to-class (2.1.8+) | 自定义出场终止样式类名,即 v-leave-to |
(1)通过 npm 安装 animate.css
npm i animate.css
(2)在页面引入 animate.css
import 'animate.css'
(3)在元素上直接通过类名使用
<!-- 因为是动画,所以直接使用 enter-active-class 和 leave-active-class 即可 -->
<transition enter-active-class='animate__动画名 animate__animated' leave-active-class='animate__动画名 animate__animated'>
...
</transition>
(4)也可以只借助动画库的动画名,自己定义 animation
样式
<transition enter-active-class='in'>
...
</transition>
...
// css
.in {
animation: 动画库中动画的名字 动画时长 ease;
}