vue学习笔记--动画

最新推荐文章于 2023-02-28 09:02:27 发布

watson_pillow

最新推荐文章于 2023-02-28 09:02:27 发布

阅读量179

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/watson_pillow/article/details/109284449

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

过渡类名实现

进入过程:
v-enter：进入的时刻（Opacity:0);进入之前，元素的状态，此时还没有进入
v-enter-active：进入的过程（时间段）；入场动画时间段
v-enter-to：进入后的时刻（Opacity:1)

离开过程：
v--leave：离开的起始时刻（Opacity:1)
v-leave-active：离开的过程（时间段）；出场动画时间段
v-leave-to：离开后的时刻（Opacity:0);动画离开之后，离开的终止状态，此时，元素的动画已经结束

步骤：

使用transition元素，把需要被动画控制的元素，包裹起来。
自定义两组样式，控制transition内部元素实现动画。

<style type="text/css">
	.v-enter,
	.v-leave-to{
		opacity: 0;
		transform: translateX(90px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 1s ease;
	}
</style>
<body >
	<div class = "app ">
		<input type="button" name="" value="转换" v-on:click="flag=!flag">
		<transition>
			<h3 v-if="flag">加了动画的h3标签</h3>
		</transition>
		<h3 v-if="flag">h3标签</h3>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			flag:false
		},
		methods:{
		}
	})
</script>

自定义类名

修改transition标签的name属性为自定义名称，同时修改属性类中的v为刚刚的自定义名称，如：v-enter --> my-enter

<style type="text/css">
	.my-enter,
	.my-leave-to{
		opacity: 0;
		transform: translateY(90px);
	}
	.my-enter-active,
	.my-leave-active{
		transition: all 1s ease;
	}
</style>
<body >
	<div class = "app ">
		<input type="button" name="" value="转换" v-on:click="flag=!flag;flagMy=!flagMy">
		<transition name="my">
			<h3 v-if="flagMy">加了自定义动画的h3标签</h3>
		</transition>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			flag:false,
			flagMy:false
		},
		methods:{
		}
	})
</script>

在这里插入图片描述

使用第三方类库animate.css

入场 bounceIn 离场 bounceOut
标签transition绑定动画需要加animated

<link rel="stylesheet"  href="./animate.min.css">
<body >
	<div class = "app ">
		<input type="button" name="" value="转换" v-on:click="flag=!flag">
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
			<h3 v-if="flag">加了动画的h3标签</h3>
		</transition>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			flag:false,
		},
		methods:{
		}
	})
</script>

或者将动画写到元素里面

<transition enter-active-class=" bounceIn" leave-active-class=" bounceOut">
	<h3 v-if="flag" class="animated">加了动画的h3标签</h3>
</transition>

加上统一动画时间 :duration=“600”

<transition enter-active-class=" bounceIn" leave-active-class=" bounceOut" :duration="300">
	<h3 v-if="flag" class="animated">加了动画的h3标签</h3>
</transition>

分别绑定时间

<transition enter-active-class=" bounceIn" leave-active-class=" bounceOut" :duration="{enter:600,leave:300}">
	<h3 v-if="flag" class="animated">加了动画的h3标签</h3>
</transition>

在这里插入图片描述

钩子函数

<style type="text/css">
	.ball{
		width:15px;
		height: 15px;
		border-radius: 50%;
		background-color: blue;
	}
</style>

<link rel="stylesheet"  href="./animate.min.css">
<body >
	<div class = "app ">
		<input type="button" value="添加购物车" @click="flag=!flag" name="">
		
		<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
			<div class="ball" v-show="flag"></div>
		</transition>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			flag:false,
		},
		methods:{
			beforeEnter(el){
				// el参数为，要执行动画的元素，是一个原生的dom对象
				// 动画入场之前，动画还未开始，可以在此函数中设置动画开始前的其实状态
				el.style.transform = "translate(0,0)";//设置起始位置
			},
			enter(el,done){
				// 动画开始之后的样式，设置小球完成动画之后的 结束状态
				el.offsetWidth;//此句没有实际作用，如果不写则没有动画效果，认为此句强制动画刷新（也可以使用el.offsetHeight)
				el.style.transform = "translate(150px,450px)"
				el.style.transition = "all 1s ease"
				// done是after函数的引用，动画完成后立即调用
				done();
			},
			afterEnter(el){
				// 动画完成之后调用，
				this.flag = false;
			},
		}
	})
</script>

在这里插入图片描述

画钩子函数的顺序：
before-enter
enter
after-enter
enter-cancelled

before-leave
leave
after-leave
leave-cancelled

vue把一个完整的动画，用钩子函数，拆分成了两部分：
使用flag标识符，表示动画的切换；
刚开始，flag为false，变为true，为上半场动画，由true变为false为下半场动画（此次看到的为上半场动画，结束时一瞬间将flag置为false，跳过后半场动画）；

transition_group

由于使用v-for渲染，不能使用transition，需要使用 transition-group,v-for需要加 key。

<style type="text/css">
	li{
		border:1px dashed #999;
		margin:5px;
		line-height: 15px;
		padding-left: 5px;
		font-size: 12px;
		width: 100%;
	}
	li:hover{
		background-color: hotpink;
		transition: all 0.4s ease;
	}
	.v-enter,
	.v-leave-to{
		opacity: 0;
		transform: translateY(80px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 1s ease;
	}
	.v-move{
		transition:all 0.7s ease;
	}
	.v-leave-active{
		position: absolute;
	}
</style>
<body >
	<div class = "app ">
		<div>
			<label>
				id:
				<input type="text" v-model="id" name="">
			</label>

			<label>
				name:
				<input type="text" v-model="name" name="">
			</label>

			<input type="button"  @click="add" value="新增" name="">

		</div>
		<!-- <ul> -->
			<transition-group appear tag="ul">
				<li v-for="(item,i) in list" v-bind:key="item.id" @click="del(i)">{{item.id}}--{{item.name}}</li>
			</transition-group>
		<!-- </ul> -->
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			id:"",
			name:"",
			list:[
				{id:1,name:'tom'},
				{id:2,name:'jerry'},
				{id:3,name:'lily'},
				{id:4,name:'hank'},
				{id:5,name:'trump'},
			]
		},
		methods:{
			add(){
				var objn = {id:this.id,name:this.name};
				this.list.push(objn);
				this.id = this.name = ""
			},
			del(index){
				this.list.splice(index,1);
			}
		}
	})
</script>

效果：
在这里插入图片描述
v-move与v-leave-to为固定写法，移除时实现列表后续元素，缓慢飘上来的效果。
给transition-group增加appear属性，实现页面刚展示出来时的入场效果。
通过transition-group的tag属性渲染ul属性，不指定时，渲染span元素。
在这里插入图片描述