学习VUE第十三天课程（VUE之组件（VUE之过渡+动画）

Love The Way You Lie 2023-06-12 04:22 16阅读 0赞

# VUE之过渡+动画 #

**（1）页面初始化渲染动画  
（2）transition过渡+@keyframes动画  
（3）过渡&&动画时长控制—type属性  
（4）自定义时长**

# 页面初始化渲染动画 #

**目前为止，已经结合animated.css动画库实现了@keyframes类型动画切换效果。**

**如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下**  
![在这里插入图片描述][20191031145237323.png]

# 过渡+动画 #

**如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性**

### 步骤： ###

**1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动，如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

**2、设置transition过渡属性值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

**测试后发现此时便可以实现过渡+动画同时作用与指定元素**

## 时间BUG： ##

**目前为止，过渡时间与动画@keyframes类型时间还不一致，这里过渡时间为3s，查看源码后发现动画库的延时为1秒  
如果时间不进行统一，可能导致不可预测的bug，影响vue项目性能，所以需要统一时间**

# 过渡时长type属性 #

**一般为了效果执行完毕，时长以较长的为准，所以这里以过渡时长transition为准，此时需要添加type属性，语法如下**

##### （1）type=”transition” #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
**（1）type=”transition”以过渡时长为准，测试如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

# 动画时长type属性 #

除此之外，也可以以@keyframes动画时长为准，语法如下  
**（2）type=”animation”**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

###### 验证方法和之前类似，控制台检测即可。 ######

## 自定义时长 ##

**除了使用transition标签元素的type属性去指定时长外，也可以自定义时长，此时需要用到duration延迟属性，如法如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]  
**入场时长+出场时长  
除了统一设定时长外，也可以分开设置入场+出场时长，如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

### 注意：duration延时属性，如果想识别后面的表达式，需要利用v-bind动态绑定该属性，否则会报错。 ###

# 以下为案例源码！！： #

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>demo</title>
    	<style type="text/css">
    		.demo{
    			width: 200px;
    			height: 200px;
    			background: red;
    		}
    		.demo1{
    			width: 200px;
    			height: 200px;
    			background: green;
    		}
    
    		.fade-enter,.fade-leave-to{
    			opacity: 0;
    		}
    		.fade-enter-active,.fade-leave-active{
    			transition: opacity 3s;
    		}
    		.fade-enter-to,.fade-leave{
    			opacity: 1;
    		}
    	</style>
    	<link rel="stylesheet" type="text/css" href="./animate.min.css">
    	<script type="text/javascript" src="./vue-2.6.9.min.js"></script>
    </head>
    <body>
    	<div id="root">
    		<transition 
    			v-bind:duration="{enter:3000,leave:2000}"
    			type="animation"
    			appear
    			appear-active-class="animated swing"
    			enter-active-class="animated swing fade-enter-active"
    			leave-active-class="animated swing fade-leave-active"
    			name="fade">
    			<div class="demo" v-show="status"></div>
    		</transition>
    		<button @click="handleClick">toggle</button>
    	</div>
    	<script type="text/javascript">
    		var root = new Vue({
    			el:'#root',
    			data:{
    				status:true
    			},
    			methods:{
    				handleClick(){
    					this.status = !this.status;
    				}
    			}
    		})
    	</script>
    </body>
    </html>

## 如有问题或者疑问请留言联系小编！！！！ ##

## 感谢来访！！！！ ##

[20191031145237323.png]: /images/20230531/0919361677c945d68d6e1e9616f3914e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/a84eef87e5814cc599a0e8b96f9cda8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/78eecc3a8e1749d7962a948bd9d8ebf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/35c81f4ecc3f49dbaf50e88d84eac9e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/8949d69f0b8f496ca55b28daaaf43996.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/d4c2ab462eea41d491ce4f889a5468e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/9440e9ac1ed04d2f80faaa92f507b85a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/7f487e7da94f461faf15082247595da7.png