学习VUE第十三天课程（VUE之组件（VUE之动画与animate.css动画库））

本是古典何须时尚 2023-06-12 04:21 10阅读 0赞

# VUE之动画与animate.css动画库 #

**Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：  
在 CSS 过渡和动画中自动应用 class**  
可以配合使用第三方 CSS 动画库，如 Animate.css  
在过渡钩子函数中使用 JavaScript 直接操作 DOM  
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

**在进入/离开的过渡中，会有 6 个 class 切换：**  
v-enter（插入）类原理—动画流程概念图  
![在这里插入图片描述][20191031143701563.png]  
**v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除**

## 过渡动画原理 ##

**v-leave（移除）类原理—动画流程概念图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
**同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)**

# 概念图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

## 过渡 ##

**首先回顾下过渡效果的实现**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

## 动画 ##

**借助fade-leave-active和fade-enter-active贯穿整个过程的特性，可以这样去写动画效果**  
**（1）首先将CSS代码修改如下**  
![在这里插入图片描述][20191031143830210.png]  
**（2）定义+调用动画效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

# 公共化动画名 #

**公共化动画名  
顾名思义，就是将动画名提取出来，以后直接使用即可。**

公共化动画名步骤：  
**1、自行随意定义修改动画名**  
![在这里插入图片描述][20191031143911957.png]

**2、不使用默认提供的命名规范，在transition标签里添加相关属性  
（1）enter-active-class属性  
（2）enter-leave-class属性**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

# 公共化动画名小结： #

综上所述，当某些动画应用较多时，可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。

**语法如下所示**  
![在这里插入图片描述][20191031144003794.png]

# Vue+animate.css动画库 #

**既然现在可以自己定义enter-active-class和leave-active-class动画类名，决定相关动画效果，借助这个特性，可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

### Vue+animate.css动画库步骤 ###

**（1）下载代码库引入**  
![在这里插入图片描述][20191031144048557.png]  
**（2）选择相应动画效果类名并引入，如下所示**  
![在这里插入图片描述][20191031144053850.png]

### 至此，便可以实现vue+animate.css动画库的结合使用 ###

**优势：  
像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。**  
**注意：  
1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class  
2、使用时必须加入animated类名**

# 动画VS过渡 #

**CSS 动画与CSS 过渡用法类似，区别在于  
①在过渡中v-enter类名在元素被插入之前生效，在元素被插入之后的下一帧移除，即在节点插入 DOM 后会立即删除  
②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animation end 事件触发时删除**

## 简单的案例代码如下！！！： ##

<!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;
    		}
    		/*1、定义动画*/
    		@keyframes bounce{
    			0%{transform: scale(0);}
    			50%{transform: scale(1.5);}
    			100%{transform: scale(1);}
    		}
    		/*2、调用动画*/
    		.bounceIn{
    			transform-origin: left top;
    			animation: bounce 1s;
    		}
    		.bounceOut{
    			transform-origin: left top;
    			animation: bounce 1s reverse;
    		}
    
    	</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 
    			enter-active-class="bounceIn animated fadeInLeft"
    			leave-active-class="bounceOut animated fadeOutDownBig"
    			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:false
    			},
    			methods:{
    				handleClick(){
    					this.status = !this.status;
    				}
    			}
    		})
    	</script>
    </body>
    </html>

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

## 感谢来访！！！ ##

[20191031143701563.png]: /images/20230531/1f659f270b8e477286838abe417a803f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/bcaa4a7a39ee4e3c90bcac92761731d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/a197ad709a8f4d7997feeb8c6735cfa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/f2883f9e6e7d4cb4b0bac5e61b1e5cdb.png
[20191031143830210.png]: /images/20230531/2c423d3bdcc34a89b965e8b68970a596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/e175487972694f1baff524a227c2e1de.png
[20191031143911957.png]: /images/20230531/5c6f0f58bb9f4544ab4a5f60eddd2b67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/d86fe786cb934d0b99376689a123a6e6.png
[20191031144003794.png]: /images/20230531/d36d68aa62ba48d28d0d0556c19cfe46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/2365979d429e4f98ab0417cd9f7db9b7.png
[20191031144048557.png]: /images/20230531/cf291dd3608549d2af381427dee24320.png
[20191031144053850.png]: /images/20230531/bf7fb737ae174d0bbacd4dd67404758c.png