Vue学习动画效果

最新推荐文章于 2024-04-29 03:31:56 发布

风飞叶

最新推荐文章于 2024-04-29 03:31:56 发布

阅读量104

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45422667/article/details/98209695

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue中动画

使用过渡类名

1.HTML样式

<div id="app">
			<input type="button" value="toggle" @click="flag=!flag"/>
			
			<!--1.使用transition 元素，把需要被动画控制的元素，包裹起来-->
            <!--2.transition 元素，是Vue官方提供	-->	
            <br />
			<transition>  <!--可以区分不同组的动画-->
				<h3 v-if="flag">这是一个H3</h3>
			</transition>
			
			
			 <input type="button" value="toggle2" @click="flag2=!flag2">
        	<transition name="my">
            	<h3 v-if="flag2">This is a h3</h3>
       		 </transition>
		</div>

2.vm样式

<script>
			 var vm = new Vue(
            {
                el: '#app',
                data: {
                    flag: true,
                    flag2: true,
                },
                methods: {
                    toggle() {
                        this.flag = !this.flag
                    }
                },
            }
        )
		</script>

3.定义两组类名样式

<style>
			 /*
	        v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入
	        v-leave-to  【这是一个时间点】是动画离开之后离开的终止状态，此时元素的动画已经结束了
	        */
	        .v-enter,
	        .v-leave-to{
	            opacity: 0;
	            transform: translateX(180px); /*位移*/
	        }
	
	        /*
	        v-enter-active 【入场动画的时间段】
	        v-leave-active 【离场动画的时间段】
	        */
	        .v-enter-active,  
	        .v-leave-active{
	            transition: all .4s ease;
	           
	        }
	
	        .my-enter,
	        .my-leave-to{
	            opacity: 0;
	            transform: translateY(180px); /*位移*/
	        }
	
	
	        .my-enter-active,  
	        .my-leave-active{
	            transition: all .4s ease;
	           
        }
    </style>

列表的排序过渡

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<style>
			li{
				border: 1px dashed #007BFF;
				margin: 5px;
				font-size: 13px;
				line-height: 35px;
				padding-left: 5px;
				width: 100%;
			}
			
			li:hover{
				background-color: greenyellow;
				transition: all 0.8s ease;
			}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateY(80px);
			}
			.v-enter-active{
				transition: all 0.6s ease;
			}
			 /*下面的.v-move和.v-leave-active配合使用，能够实现列表后续的元素渐渐的漂上来的效果*/
			.v-leave-active{
				position: absolute;
			}
			
			.v-move{
				transition: all 0.6s 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"  @keyup.enter="add"/> <!--当按enter键调用add方法-->
				</label>
				<input type="button" @click="add" value="添加"/>
			</div>
			<!--<ul>-->
			<!--在实现列表过度的时候，如果需要过渡的元素是用transitionGroup 而不是 transition-->
            <!--给transition-group添加apper属性，实现入场时侯的效果-->
            <!--通过给transition-group标签tag属性指定将来transition-group渲染成什么元素-->
				<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>
				
			<!--</ul>-->
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					list: [
					{id:1, name:'魏无羡'},
					{id:2, name:'蓝忘机'},
					{id:3, name:'金凌'},
					{id:4, 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>

使用钩子函数

1.定义 transition 组件以及三个钩子函数：

		<div id="app">
			 <input type="button" value="快到碗里来" @click="flag=!flag">
        	<transition  @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        
        		<div v-show="flag"  class="ball"></div>
        	</transition>
		</div>

2.定义三个 methods 钩子方法

var vm=new Vue({
				el:'#app',
				data:{
					flag:false
				},
				methods:{
				//可以认为 el 是通过 document.getElemtById()方式获取到的原生JS DOM对象
				//动画钩子函数的第一个参数:el表示要执行动画的那个DOM元素，可以认为el是通过document.getElementById()得到的
					beforeEnter(el){
						//beforeEnter表示动画入场之前，还未开始，可以设置开始之前的起始样式
						//设置小球开始动画之前的起始位置
						el.style.transform="translate(0, 0)"
					},
					enter(el ,done){
						//表示动画开始之后的样式，可以设置小球完成动画之后的状态
						el.offsetWidth		//这句话没有实际的作用，但是如果不屑，出不来动画效果  可以认为el.offsetWidth会强制动画刷新				
						el.style.transform="translate(150px, 450px)"
						el.style.transition="all 1s ease"
						//这里的done，其实就是aftereEnter这个函数
                     	done() //完成后立即消失
					},
					afterEnter(el){//动画完成之后调用
						   this.flag=false
					}
				},
			})

3.定义动画过渡时长和样式：

.ball{
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: hotpink;
			}

使用第三方类库实现动画

这里使用的是animate.css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../animate.css"/>
	</head>
	<body>
		<div id="app">
			<input type="button" value="toggle" @click="flag=!flag"/>
			<transition 
				enter-active-class="bounceIn"
				leave-active-class="bounceOut"
				:duration="{ enter:200, leave: 400 }">
				<h3 v-if="flag" class="animated">这是一个H3</h3>
			</transition>
			
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					flag:false
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

风飞叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习动画效果

Vue中动画使用过渡类名1.HTML样式<div id="app"> <input type="button" value="toggle" @click="flag=!flag"/>  <!--2.transition 元素...
复制链接

扫一扫