【Vue框架】Vue2中动画效果详解—单组动画、多组动画、使用animate动画库、transition-group 列表动画(附源码)

最新推荐文章于 2025-06-15 19:11:20 发布

量化Mike

最新推荐文章于 2025-06-15 19:11:20 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： NodeJs 文章标签： vue.js javascript 动画 animated vue2

本文链接：https://blog.csdn.net/weixin_43529465/article/details/129806265

NodeJs 专栏收录该内容

19 篇文章

订阅专栏

这篇文章介绍了Vue.js中实现单组和多组动画的方法，包括使用`v-enter`、`v-leave-to`等状态类进行元素的过渡效果设置。同时，展示了如何结合外部动画库如Animate.css来增强动画效果，以及如何在列表中使用`transition-group`进行复杂的列表项动画处理。

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

1、Vue单组动画

动画过渡效果：https://cn.vuejs.org/v2/guide/transitions.html

v-enter：进入时状态
v-enter-to：进入后状态
v-leave: 离开时状态
v-leave-to：离开后状态

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.div{width: 100px; height: 100px;background: red;}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(50px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 1s ease;
			}
			
		</style>
	</head>

	<body>
		<div id="app">
			<button @click="btn">点击</button>
			
			<transition>
				<div class="div" v-if="flag"></div>
			</transition>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag:false
				},
				methods:{
					btn(){
						this.flag = !this.flag;
					}
				},
			})
		</script>
	</body>
</html>

2、Vue定义多组动画

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.div{width: 100px; height: 100px;background: red;}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(50px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 1s ease;
			}
			
			
			.test-enter,
			.test-leave-to{
				opacity: 0;
				transform: translateY(100px);
			}
			
			.test-enter-active,
			.test-leave-active{
				transition: all 1s ease;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<button @click="btn">点击</button>
			<transition>
				<div class="div" v-if="flag"></div>
			</transition>

			<hr>

			<button @click="btn1">点击1</button>
			<transition name="test" mode="">
				<h1 v-if="flag1" >123</h1>
			</transition>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag:false,
					flag1:false
				},
				methods:{
					btn(){
						this.flag = !this.flag;
					},
					btn1(){
						this.flag1 = !this.flag1;
					}
				},
			})
		</script>
	</body>
</html>

3、使用animate动画库

动画样式库

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
		</style>
	</head>

	<body>
		<div id="app">
			<button @click="btn">点击</button>
			<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
				<div class="div" v-if="flag"></div>
			</transition>

			<hr>

			<button @click="btn1">点击1</button>
			<transition name="test" mode="">
				<h1 v-if="flag1" >123</h1>
			</transition>
			
			
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag:false,
					flag1:false
				},
				methods:{
					btn(){
						this.flag = !this.flag;
					},
					btn1(){
						this.flag1 = !this.flag1;
					}
				},
			})
		</script>
	</body>
</html>

4、transition-group 列表动画

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateY(100px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 1s ease;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 
				在transition-group内部不需要再加上ul,在tag中添加
				属性appear可以添加入场属性动画
			 -->
			<transition-group tag="ul" appear>
				<li v-for="(item, i) in list" :key="item.id">
					{{item.id}}=={{item.name}}=={{item.age}}
				</li>
			</transition-group>
			
			<input type="text" placeholder="id" v-model="id"/>
			<input type="text" placeholder="name" v-model="name"/>
			<input type="text" placeholder="age" v-model="age"/>
			
			<button @click="btn">新增</button>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					id:'',
					name:'',
					age:'',
					list:[
						{id:1,name:'小米',age:18},
						{id:2,name:'小明',age:28},
						{id:3,name:'小宜',age:38}
					]
				},
				methods:{
					btn(){
						var newobj = {id:this.id,name:this.name,age:this.age}
						this.list.push(newobj);
					}
				},
			})
		</script>
	</body>
</html>