VUE—从入门到飞起（三）

蔚落 2023-02-21 02:24 8阅读 0赞

**目录**

动画

显示隐藏（不使用动画）

使用过渡类名

使用第三方类animate.css实现动画

使用钩子函数模拟小球半场动画

列表动画

--------------------

[VUE—从入门到飞起（一）][VUE]

[VUE—从入门到飞起（二）][VUE 1]

[VUE—从入门到飞起（三）][VUE 2]

[VUE—从入门到飞起（四）][VUE 3]

[VUE—从入门到飞起（五）][VUE 4]

# 动画 #

## 显示隐藏（不使用动画） ##

<body>
    	<div id="app">
    		
    		<button @click="flag = !flag">显示隐藏</button>
    		<h3 v-show="flag">这是一个h3</h3>
    	</div>
    </body>
    <script>
    	var vm = new Vue({
    		el:"#app",
    		data:{
    			flag : false
    		},
    		methods:{
    			
    		}
    	})
    </script>

## 使用过渡类名 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>过渡类名1</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<style>
    			/* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*/
    			/* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了*/
    			.v-enter,
    			.v-leave-to{
    				opacity: 0;
    				transform: translateX(80px);
    			}
    			
    			/*v-enter-active 【入场动画的时间段】 */
    			/*v-leave-active 【离场动画的时间段】 */
    			.v-enter-active,
    			.v-leave-active{
    				transition: all 0.8s ease;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			
    			
    			<button @click="flag = !flag">显示隐藏</button>
    			<transition>
    				<h3 v-show="flag">这是一个h3</h3>
    			</transition>
    		</div>
    	</body>
    	<script>
    		var vm = new Vue({
    			el:"#app",
    			data:{
    				flag : false
    			},
    			methods:{
    				
    			}
    		})
    	</script>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>过渡类名2</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<style>
    			/* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*/
    			/* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了*/
    			.v-enter,
    			.v-leave-to{
    				opacity: 0;
    				transform: translateX(80px);
    			}
    			
    			/*v-enter-active 【入场动画的时间段】 */
    			/*v-leave-active 【离场动画的时间段】 */
    			.v-enter-active,
    			.v-leave-active{
    				transition: all 0.8s ease;
    			}
    			
    			
    			/*h6的 name="my"， 前缀就是my，可以区分不同组的动画*/
    			.my-enter,
    			.my-leave-to{
    				opacity: 0;
    				transform: translateY(80px);
    			}
    			.my-enter-active,
    			.my-leave-active{
    				transition: all 0.8s ease;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			
    			
    			<button @click="flag = !flag">显示隐藏</button>
    			<transition>
    				<h3 v-show="flag">这是一个h3</h3>
    			</transition>
    			<hr />
    			
    			
    			<button @click="flag2 = !flag2">显示隐藏2</button>
    			<transition name="my">
    				<h6 v-show="flag2">这是一个h2</h6>
    			</transition>
    		</div>
    	</body>
    	<script>
    		var vm = new Vue({
    			el:"#app",
    			data:{
    				flag : false,
    				flag2 : false
    			},
    			methods:{
    				
    			}
    		})
    	</script>
    </html>

## 使用第三方类animate.css实现动画 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>animate</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<link rel="stylesheet" href="../../../thirdlib/css/animate.css" />
    		
    		<style>
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			
    			
    			<button @click="flag = !flag">显示隐藏</button>
    			
    			
    			
    			
    			
    			
    			<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200, leave:400}">
    				<h3 v-show="flag" class="animated">这是一个h3</h3>
    			</transition>
    		</div>
    	</body>
    	<script>
    		var vm = new Vue({
    			el:"#app",
    			data:{
    				flag : false
    			},
    			methods:{
    				
    			}
    		})
    	</script>
    </html>

## 使用钩子函数模拟小球半场动画 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>动画钩子函数</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<style>
    			.ball{
    				width: 15px;
    				height: 15px;
    				border-radius: 50%;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<input type="button" value="快到碗里来" @click="flag = !flag" />
    			
    			<transition
    				v-on:before-enter="beforeEnter"
    				@enter="enter"
    				@after-enter="afterEnter"
    				@enter-cancelled=""
    				>
    				<div v-show="flag" class="ball"></div>
    			</transition>
    		</div>
    		<script>
    			var vm = new Vue({
    				el : "#app",
    				data : {
    					flag : false
    				},
    				methods:{
    					//注意：动画钩子函数的第一个参数el，表示要执行动画的那个元素是个源生的dom对象
    					//相当于document.getElementById('')获取的源生对象
    					beforeEnter(el){
    						//beforeEnter表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式
    						//设置小球开始动画之前的起始位置
    						el.style.transform = "translate(0, 0)";
    						
    					},
    					enter(el, done){
    						//这句话没有实际的作用，但是，如果不写，出不来动画效果
    						//可以认为，el.offsetWidth会强制动画刷新（offset相关都可）
    						el.offsetWidth;
    						
    						//表示动画 开始之后的样式，这里可以设置小球完成动画之后的结束状态
    						el.style.transform = "translate(150px, 450px)";
    						el.style.transition = 'all 1s ease';//
    						//这里的done其实就是afterEnter这个函数，也就是说done()是afterEnter函数的引用
    						//这是必须的
    						done();
    					},
    					afterEnter(el){
    						//动画完成之后会调用
    						this.flag = !this.flag;
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

## 列表动画 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>数据列表实现动画</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<style>
    			li{
    				border : 1px dashed #999;
    				margin: 5px;
    				line-height: 35px;
    				padding-left: 5px;
    				font-size: 12px;
    				width: 100%;
    			}
    			.v-enter,
    			.v-leave-to{
    				opacity: 0;
    				transform: translateY(80px);
    			}
    			.v-enter-active,
    			.v-leave-active{
    				transition: all 0.6s ease;
    			}
    			/*下面的.v-move和.v-leave-active配合使用能够实现列表后续元素渐渐飘上来的效果*/
    			.v-move{
    				transition: all 0.6s ease;
    			}
    			.v-leave-active{
    				position:absolute;
    			}
    			
    			li:hover{
    				background-color: hotpink;
    				transition: all 0.8s ease;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<div>
    				<label>
    					id:
    					<input type="text" v-model="id" />
    				</label>
    				<label>
    					name:
    					<input type="text" v-model="name" />
    				</label>
    				<input type="button" value="添加" @click="add" />
    			</div>
    			
    			
    			
    				
    				
    				<transition-group appear tag="ul">
    					<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
    						{
       { item.id }} --- {
       { item.name }}
    					</li>
    				</transition-group>
    			
    		</div>
    		<script>
    			var vm = new Vue({
    				el : "#app",
    				data : {
    					list:[
    						{id :1, name:'张三'},
    						{id:2, name:'李四'},
    						{id:3, name:'王五'}
    					],
    					id : "",
    					name:""
    				},
    				methods:{
    					add(){
    						this.list.push({id:this.id, name:this.name});
    						this.id = this.name = "";
    					},
    					del(i){
    						this.list.splice(i ,1);
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

[VUE]: https://blog.csdn.net/A_art_xiang/article/details/106855763
[VUE 1]: https://blog.csdn.net/A_art_xiang/article/details/106859395
[VUE 2]: https://blog.csdn.net/A_art_xiang/article/details/106996196
[VUE 3]: https://blog.csdn.net/A_art_xiang/article/details/106996285
[VUE 4]: https://blog.csdn.net/A_art_xiang/article/details/106996470