Vue中transition过渡效果

超、凢脫俗 2021-07-25 14:46 605阅读 0赞

**目录**

一，进入/离开过渡效果

二，过渡效果的钩子函数

三，过渡效果+Animate.css

四，列表过渡

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

## 一，进入/离开过渡效果 ##

进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；

如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；

过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是：

*  v-enter：定义进入过渡的开始状态；
 *  v-enter-active：定义进入过渡生效状态，在这里可以定义进入过渡的时间、延迟、曲线函数等；
 *  v-enter-to：定义进入过渡结束状态；
 *  v-leave：定义离开过渡的开始状态；
 *  v-leave-active：定义离开过渡生效状态，在这里可以定义离开过渡的时间、延迟、曲线函数等；
 *  v-leave-to：定义离开过渡结束状态；

注意：在<transition name='fade'>中如果指定了name属性，过渡类名的v-要替换成name属性值；例如：fade-enter

![20190916133014486.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>12_Transition</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="flag = !flag">显示/隐藏</button><br />
    			<transition name='fade'>
    				<div v-show='flag' class="mybtn"></div>
    			</transition>
    		</div>
    	</body>
    	<style type="text/css">
    		.mybtn{
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			transform: translateX(20px);
    		}
    		.fade-enter-active, .fade-leave-active{
    			transition: all 1s;
    		}
    		.fade-enter{
    			opacity: 0;
    			transform: translateX(0px);
    		}
    		.fade-enter-to{
    			opacity: 1;
    			transform: translateX(20px);
    		}
    		.fade-leave{
    			opacity: 1;
    		}
    		.fade-leave-to{
    			opacity: 0;
    			transform: translateX(0px);
    		}
    		
    	</style>
    	<script>
    		let vm = new Vue({
    			data : {
    				flag : false
    			}
    		}).$mount('#sikiedu');
    	
    	</script>
    </html>

![20190916134449934.gif][]

## 二，**过渡效果的钩子函数** ##

过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现；

过渡效果的钩子函数有：

*  @before-enter=“beforeEnter“   ：进入过渡运行前
 *  @enter=“enter“  ：进入过渡运行时
 *  @after-enter=“afterEnter“  ：进入过渡运行后
 *  @enter-cancelled=“enterCancelled“  ：进入过渡被打断时
 *  @before-leave=“beforeLeave“  ：离开过渡运行前
 *  @leave=“leave“  ：离开过渡运行时
 *  @after-leave=“afterLeave“  ：离开过渡运行后
 *  @leave-cancelled=“leaveCancelled“  ：离开过渡被打断时

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>13_Transition_01</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="flag = !flag">显示/隐藏</button><br />
    			<transition name='fade'
    				@before-enter="beforeEnter"
    				@enter="enter"
    				@after-enter="afterEnter"
    				@enter-cancelled="enterCancelled"
    				
    				@before-leave="beforeLeave"
    				@leave="leave"
    				@after-leave="afterLeave"
    				@leave-cancelled="leaveCancelled"	
    			>
    				<div v-show='flag' class="mybtn"></div>
    			</transition>
    		</div>
    	</body>
    	<style type="text/css">
    		.mybtn{
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			transform: translateX(20px);
    		}
    		.fade-enter-active, .fade-leave-active{
    			transition: all 2s;
    		}
    		.fade-enter{
    			opacity: 0;
    			transform: translateX(0px);
    		}
    		.fade-enter-to{
    			opacity: 1;
    			transform: translateX(20px);
    		}
    		.fade-leave{
    			opacity: 1;
    		}
    		.fade-leave-to{
    			opacity: 0;
    			transform: translateX(0px);
    		}
    		
    	</style>
    	<script>
    		let vm = new Vue({
    			data : {
    				flag : false
    			},
    			methods : {
    				beforeEnter(){
    					alert("beforeEnter 进入过渡状态 开始 前");
    				},
    				enter(el){
    					alert("enter 进入过渡状态 开始");
    					setTimeout(()=>{
    						el.style.backgroundColor = 'green';
    					}, 1000);
    				},
    				afterEnter(){
    					alert("afterEnter 进入过渡状态 结束");
    				},
    				enterCancelled(){
    					alert("enterCancelled 进入过渡状态 被打断");
    				},
    				
    				beforeLeave(){
    					alert("beforeLeave 离开过渡状态 开始 前");
    				},
    				leave(el){
    					alert("leave 离开过渡状态 开始");
    					el.style.backgroundColor = 'red';
    				},
    				afterLeave(){
    					alert("afterLeave 离开过渡状态 结束");
    				},
    				leaveCancelled(){
    					alert("leaveCancelled 离开过渡状态 被打断");
    				}
    			}
    		}).$mount('#sikiedu');
    	
    	</script>
    </html>

![20190916135508828.gif][]

## 三，**过渡效果****+****Animate.css** ##

Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如**[Animate.css][]**；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

使用第三方动画库我们需要用到自定义过渡类名：

*  enter-class；
 *  enter-active-class；
 *  enter-to-class；
 *  leave-class；
 *  leave-active-class；
 *  leave-to-class；

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>14_Transition_02</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="flag = !flag">显示/隐藏</button><br />
    			<transition name='fade'
    				enter-to-class='animated zoomInDown'	
    				leave-to-class='animated zoomOutUp'	
    			>
    				<div v-show='flag' class="mybtn"></div>
    			</transition>
    		</div>
    	</body>
    	<style type="text/css">
    		.mybtn{
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			transform: translateX(20px);
    		}
    		.fade-enter-active, .fade-leave-active{
    			transition: all 2s;
    		}
    		.fade-enter{
    			opacity: 0;
    			transform: translateX(0px);
    		}
    		.fade-enter-to{
    			opacity: 1;
    			transform: translateX(20px);
    		}
    		.fade-leave{
    			opacity: 1;
    		}
    		.fade-leave-to{
    			opacity: 0;
    			transform: translateX(0px);
    		}
    		
    	</style>
    	<script>
    		let vm = new Vue({
    			data : {
    				flag : false
    			}
    		}).$mount('#sikiedu');
    	
    	</script>
    </html>

![20190916140411248.gif][]

## 四，**列表过渡** ##

之前我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；

如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致；

注意：在<transition-group>的元素要指定个唯一的 :key 属性

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>15_Transition_Group</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="addNum">添加数字</button><br />
    			<transition-group name='fade' tag='ul'>
    				<li v-for='(item,index) in numArray' :key='item'>
    					{
       {item}}
    					<button @click='removeNum(index)'> - </button>
    				</li>
    			</transition-group>
    		</div>
    	</body>
    	<style type="text/css">
    		.mybtn{
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			transform: translateX(20px);
    		}
    		.fade-enter-active, .fade-leave-active{
    			position: absolute;
    			transition: all .5s;
    		}
    		.fade-enter{
    			opacity: 0;
    			transform: translateX(-20px);
    		}
    		.fade-enter-to{
    			opacity: 1;
    		}
    		.fade-leave{
    			opacity: 1;
    		}
    		.fade-leave-to{
    			opacity: 0;
    			transform: translateX(20px);
    		}
    		.fade-move{
    			transition: transform .5s;
    		}
    		
    	</style>
    	<script>
    		let vm = new Vue({
    			data : {
    				flag : false,
    				a : '1',
    				b : '1',
    				numArray : [1, 2, 3, 4, 5]
    			},
    			methods : {
    				addNum(){
    					let num = Math.ceil(Math.random() * 100);
    					this.numArray.push(num);
    				},
    				removeNum(index){
    					this.numArray.splice(index, 1);
    				}
    			}
    		}).$mount('#sikiedu');
    	
    	</script>
    </html>

![20190916142523526.gif][]

过渡效果2：

style

.slide-fade{
      position: absolute;left:0;right: 0;
    }
    .slide-fade-enter-active {
      transition: all 0.8s ease;
    
    }
    .slide-fade-leave-active {
      transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
    {
      left:0;right: 0;
      transform: translateY(-10px);
      opacity: 0;
    }

效果：

![20191206084427446.gif][]

[20190916133014486.png]: /images/20210725/bad63aa2312d471cb6b4dc4f391f7678.png
[20190916134449934.gif]: /images/20210725/7d863c1a82424b17939beded95bf8b78.png
[20190916135508828.gif]: /images/20210725/ed4c30be503e43e1b7f26f8bb9f79d4b.png
[Animate.css]: https://daneden.github.io/animate.css/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/287f4a407aeb4d499e0e53b3af4c834d.png
[20190916140411248.gif]: /images/20210725/c1496fa8beec4ef293f5315bcb214f0a.png
[20190916142523526.gif]: /images/20210725/ac8c44493aa24f57a09c6970de1c33c7.png
[20191206084427446.gif]: /images/20210725/7ea44698aed945768954d9665979c5b8.png