vue 组件过渡动画

╰+哭是因爲堅強的太久メ 2021-07-24 11:39 583阅读 0赞

(0)使用场景
    	搭配标签消失/出现(v-show、v-if)产生效果
    	搭配动态组件<component :is='x'></component>产生效果
    	搭配:key生成销毁元素产生效果
    
    (1)避免动画消失元素恢复原样
    	因为动画会消失,所以配合js触发动画时改变元素样式到和动画最后一帧相同,就能避免动画消失后元素恢复原样
    
    (2)添加动画模式
    	自定义动画加载方式,还可以避免视图重绘出现动画混乱,如一个离开过渡的时候另一个开始进入过渡
    	<transition mode='out-in'>
    		...
    	</transition>
    	在transition标签上添加 mode='out-in / in-out'
    		out-in:当前元素过渡,过度完后新元素过渡进入
    		in-out:新元素过渡,过度完成后当前元素过渡离开
    	
    (2.5)设置动画过渡时间:
    	默认情况下,Vue会等待其在过渡效果的根元素的第一个transitionend或animationend事件。
    	<transition :duration="1000" >
    		...
    	</transition>
    		:duration="1000"	设置入场/出场动画都为1秒
    		:duration="{ enter: 500, leave: 800 }"   分别设置入场/出场动画时间
    	 		
    
    (2.6)设置首屏加载动画:
    	无论是appear还是@appear钩子都会生成初始渲染过渡
    	<transition 
    		appear
    		自定义类名首屏过渡:
    		  appear-class="custom-appear-class"
    		  appear-to-class="custom-appear-to-class"
    		  appear-active-class="custom-appear-active-class"
    		首屏过渡钩子:
    		  @before-appear="customBeforeAppearHook"
    		  @appear="customAppearHook"
    		  @after-appear="customAfterAppearHook"
    		  @appear-cancelled="customAppearCancelledHook"
    	>
    		...
    	</transition>
    
    (2.7)监听动画/过渡结束
    	transitionend:监听过渡
    	animationend:监听animation帧动画
    
    		<transition type='类型'>
    			<h1 v-if="show" @transitionend="f1">过渡</h1>
    		</transition>
    			默认将自动检测出持续时间长的为过渡事件类型。
    			若同一个元素同时使用了以上动画,比如animation很快的被触发并完成了,而transition效果还没结束
    			type='animation'或'transition',来明确声明需要Vue监听的类型。
    
    1、设置单个组件动画
    
    	(1)在要过渡的标签外层包裹
    	
    		<transition name='x>	若不指定name,则类名对应为v-enter,...
    			...
    		</transition>
    
    	(2)在style中:
    		方式一:
    			设置淡出,以及淡出时间
    			.x-enter,.x-leave-to{
    				opacity:0;
    			}
    			
    			.x-enter-to,.x-leave{
    				opacity:1;
    			}
    			设置淡入过程
    			.x-enter-active,.x-leave-active{
    				transition:opacity 3s
    			}
    		方式二:
    			这两种实现效果相同,因为元素本身出现默认opacity:1,利用了删类名,会自动过渡相应属性到之前的状态
    			.x-enter-active, .x-leave-active {
    			  transition: opacity .5s;
    			}
    			.x-enter, .x-leave-to {
    			  opacity: 0;
    			}
    	 	 出现过程
    			x-enter-from: 定义进入过渡的开始状态,在元素被插入之前生效,在元素被插入之后的下一帧移除。
    			x-enter-active: 定义进入过渡生效时的状态,在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除,这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
    			x-enter-to: 定义进入过渡的结束状态,在元素被插入之后下一帧生效(与此同时v-enter-from被移除),在过渡/动画完成之后移除。
    	     消失过程
    			x-leave-from: 定义离开过渡的开始状态,在离开过渡被触发时立刻生效,下一帧被移除。
    			x-leave-active: 定义离开过渡生效时的状态,在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除,这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
    			x-leave-to: 定义离开过渡的结束状态,在离开过渡被触发之后下一帧生效(与此同时v-leave-from被删除),在过渡/动画完成之后移除。
    	
    	(3)自定义类名过渡
    	 他们的优先级高于普通的类名
    	  <transition
    		enter-from-class='类名'
    		enter-active-class='animated bounceIn'
    			可结合第三方动画库,如Animate.css使用
    		enter-to-class
    		leave-from-class
    		leave-active-class
    		leave-to-class
    	  >
    
    	(4)过渡钩子
    		<transition
    		  @before-enter="beforeEnter"
    		  @enter="enter"
    		  @after-enter="afterEnter"
    		  @enter-cancelled="enterCancelled"
    		
    		  @before-leave="beforeLeave"
    		  @leave="leave"
    		  @after-leave="afterLeave"
    		  @leave-cancelled="leaveCancelled"	 ,leaveCancelled只用于v-show中
    		  
    		  :css="false"	当只用js过渡(即在这些钩子中通过js设置过渡等动画),设置该属性跳过CSS的检测以及避免过渡过程中CSS规则的影响
    		>
    		  ...
    		</transition>
    		
    		  beforeEnter:function (el) {},
    		  enter:function (el, done) {
    		   (1)当与CSS结合使用时,回调函数done是可选的
    		   (2)当只用JavaScript过渡的时候,在enter和leave中必须使用done进行回调
    		   (3)推荐对于仅使用JavaScript过渡的元素添加:css="false",Vue会跳过CSS的检测,这也可以避免过渡过程中 CSS 的影响。
    		    done();	
    		    
    		  },
    		  afterEnter:function (el) {},
    		  enterCancelled:function (el) {},
    		  beforeLeave:function (el) {},
    		  leave:function (el, done) {
    		   (1)当与CSS结合使用时,回调函数done是可选的
    		   (2)当只用JavaScript过渡的时候,在enter和leave中必须使用done进行回调
    		   (3)推荐对于仅使用JavaScript过渡的元素添加:css="false",Vue会跳过CSS的检测,这也可以避免过渡过程中 CSS 的影响。
    		    done();	
    		  },
    		  afterLeave:function (el) {},
    		  leaveCancelled:function (el) {
    		  	leaveCancelled只用于v-show中
    		  }
    
    2、过渡相同标签切换设置key来区分
    	当有相同标签名的元素切换时,需要通过key设置唯一的值来标记以让Vue区分它们,否则为了效率只会替换相同标签内部的内容,即使在技术上没有必要,给在<transition>组件中的多个元素设置key是一个更好的实践。
    	<transition>
    	  <button v-if="isEditing" key="save">Save</button>
    	  <button v-else key="edit">Edit</button>
    	</transition>
    	
    3、列表过渡
    	(1)效果:同时渲染整个列表,且列表的每个元素都具有动画
    	
    	(2)和transition区别:
    		不同于 <transition>,它会以一个真实元素呈现:默认为一个 <span>,指定tag更换为其他元素。
    		过渡模式mode不可用，因为我们不再相互切换特有的元素。
    		内部元素总是需要提供唯一的key值。
    		CSS过渡的类将会应用在内部的元素中,而不是这个组/容器本身。
    	
    	(3)钩子函数、过渡css、自定义类名、首屏加载和<transition>相同
    	
    	示例:
    		<transition-group name='x' tag='p'>
    				<li v-for='xx in xxx'  :key='唯一标识'>{
       {xx}}</li>
    		</transition-group>
    		
    	(5)在元素从屏幕上的位置发生变化的过程中添加css类
    		.x-move{
    			...
    		}
    		或
    		<transition-group name='x' tag='p' move-class="类名">
    			...
    		</transition-group>
    	
    	(4)增删元素时,其他元素具有位移过渡
    		FLIP简单的动画队列使用transforms将元素从之前的位置平滑过渡新的位置。
    		
    		.list-complete-item {	列表每个元素的类,设置过渡时间和显示类型
    		  transition: all 0.8s ease;
    		  display: inline-block;	只能为display: inline-block或者放置于flex中
    		}
    		
    		.list-complete-enter-from,
    		.list-complete-leave-to {
    		  opacity: 0;
    		  transform: translateY(30px);	
    		}
    		
    		.list-complete-leave-active {	必须在离开期间添加脱离文档流的定位(在删除元素时)
    		  position: absolute;
    		}

过渡演示图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:  
组件:

<template>
    	<div>
    		<button @click='toggle'>toggle</button>
    
    
    
    		<transition 
    			 name="custom-classes-transition"
    		    enter-active-class="animated tada"
    		    leave-active-class="animated bounceOutRight"
    		>
    			<p class='box' v-show='show'>hello2</p>	
    		</transition>
    	</div>
    
    </template>
    
    <script>
    export default{ 
    	name:'c',
    	data()
    	{ 
    		return{ 
    			show:true
    		}
    	},
    	methods:{ 
    		toggle()
    		{ 
    			this.show=!this.show
    		}
    	}
    }
    </script>
    
    <style lang='css' scoped>
    .box{ 
    	width:100px;
    	height:100px;
    	border:solid 1px red;
    }
    /*.fade-enter,.fade-leave-to{ opacity:0; width:0; } .fade-enter-to,.fade-leave{ opacity:1; width:100px; } .fade-enter-active,.fade-leave-active{ transition:all 3s }*/
    
    
    
    /*.fade-enter-active { animation: bounce-in .5s; } .fade-leave-active { animation: bounce-in .5s reverse; reverse表示消失时,反过来执行动画 } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }*/
    </style>

变大变小效果:

.fade-enter,.fade-leave-to{ 
    	opacity:0;
    	width:0;
    }
    
    .fade-enter-to,.fade-leave{ 
    	opacity:1;
    	width:100px;
    }
    
    .fade-enter-active,.fade-leave-active{ 
    	transition:all 3s
    }

搭配css的animation实现动画效果:

如在进入和过程中缩放:
    
    .x-enter-active { 
     animation: bounce-in .5s;
    }
    .x-leave-active { 
     animation: bounce-in .5s reverse;  /*reverse表示消失时,反过来执行动画*/
    }
    
    @keyframes bounce-in { 
     0% { 
       transform: scale(0);
     }
     50% { 
       transform: scale(1.5);
     }
     100% { 
       transform: scale(1);
     }
    }

搭配第三方库,如swiper的animate.css库实现动画效果:

<transition 
    	 name="custom-classes-transition"
       	 enter-active-class="animated x"    
         leave-active-class="animated xx"
    >
    	<p class='box' v-show='show'>hello2</p>	
    </transition>

设置页面加载后的入场动画:

列表的交错过渡：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/b87e290857bf49debd23a5edb698b936.png