Vue——过渡&动画

最新推荐文章于 2025-02-26 15:18:34 发布

cc_xxo

最新推荐文章于 2025-02-26 15:18:34 发布

阅读量314

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/cc_xxo/article/details/123218178

版权

本文介绍了Vue中如何使用`transition`和`transition-group`实现过渡效果，包括它们的用法、属性设置，如`name`、`appear`属性，以及对应的CSS类名如`v-enter`、`v-leave-to`等。同时提到了CSS动画的差异，并推荐了animate.css作为过渡动画库。

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

一、过渡

使用 transition 标签或 transition-group 标签包裹被附加过渡动画的标签

被transition 包裹的节点只能有一个根节点

被transition-group 包裹的节点个数随意，但是每个节点需要添加 :key属性

transition 和 transition-group 标签中的name属性用于区别各个不同动画模块也是 css 中class的前缀；appear属性用于指定初次加载时便就执行过渡

若不设置name属性默认为 v
例如

<transition name="hello" :appear="true">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
<transition-group name="hello" appear>
	<h1 :key="1" v-show="isShow">你好啊！</h1>
	<h1 :key="2" v-show="!isShow">hello Word！</h1>
</transition-group>

h1{
	background-color: #96CBFE;
}
/* 进入的起点 离开的终点 */
.hello-enter, .hello-leave-to{
	transform: translateX(-100%)
}
/* 进入的终点 离开的起点 */
.hello-enter-to, .hello-leave{
	transform: translateX(0px)
}
.hello-enter-active, .hello-leave-active{
	transition: 1s linear
}

v-enter ：载入起点

v-enter-to ：载入终点

v-enter-active ：载入全程（可再此设置时间等）

v-leave ：移出起点

v-leave-to ：移出终点

v-leave-active ：移出全程（可再此设置时间等）

二、动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<transition name="hello" :appear="true">
	<h1 v-show="isShow">你好啊！</h1>
</transition>

h1{
	background-color: #96CBFE;
}
.hello-enter-active{
	animation: atguigu 1s linear;
}
.hello-leave-active{
	animation: atguigu 1s reverse;
}
@keyframes atguigu {
	from{
		transform: translateX(-100%);
	}
	to{
		transform: translateX(0px);
	}
}