Vue的过渡动画总结

原创已于 2022-11-25 09:35:42 修改 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-25 09:34:35 首次发布

本文介绍了如何在Vue中利用内置的<transition>组件创建过渡动画，包括过渡的基本原理、不同状态的命名规则、配置name属性的应用，以及动画与过渡的区别。通过实例演示了如何定义进入、离开和过渡过程中的样式，以及在多个元素间使用和命名动画的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue封装的过渡动画

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
2.原理：

Enter	Leave
Opacity:0 ==> Opacity:1	Opacity:1 ==> Opacity: 0
v-enter 　　　 v-enter-to	v-leave　　　 v-leave-to
v-enter-active	v-leave-active

3.写法：
　　　准备好样式
　　　开始过渡中，进入和离开分别有三个切换
　　　
　　　　　•元素进入的样式
　　　　　
　　　　　　　　1. v-enter：进入过渡的开始状态
　　　　　　　　2. v-enter-active；进入过程中
　　　　　　　　3.v-enter-to：进入过渡的结束状态
　　　　　　　　
　　　　　•元素离开的样式；
　　　　　
　　　　　　　　1.v-leave:离开过渡的开始状态
　　　　　　　　2.v-leave-active:离开过程中
　　　　　　　　3.v-leave-to：离开过渡的结束状态

2.使用<transition>包裹要过渡的元素即可使用：

<transition>
<需要过渡动画的元素>
</transition>
v-enter{
	进入的开始状态你需要的样式
}
v-enter-active{
	进入过渡中你需要的样式
}
......

关于配置name属性：

<transition name="xxx">
<需要过渡动画的元素>
</transition>
xxx-enter{
	进入的开始状态你需要的样式
}
xxx-enter-active{
	进入过渡中你需要的样式
}
......

在没有配置name属性时，状态切换的前缀默认为v-
配置name属性后，状态切换的前缀需要更换为xxx-

3.动画写法与过渡
(1)动画：

元素{
background-color: orange;
······
你需要的一些基本样式
}
.v-enter-active{
	animation:name 0.5s linear;
}

.v-leave-active{
	animation:name 0.5s linear reverse;
	/*reverse为翻转，设置的是离开效果为进来效果的反过来*/
}

@keyframes name
from{
	transform:translateX(-100%);
}
to{
	transform:translateX(0px);
}

（2）过渡

元素{
background-color: orange;
······
你需要的一些基本样式
}

.v-enter.v-leave-to{
	transform: translateX(-100%);
}
.v-enter-active,.v-leave-active{
	transition: 0.5s linear;
}
.v-enter-to.v-leave{
	transform: translateX(0);
}

注意：若有多个元素需要过渡则需要使用：且每个元素都要指定key值。