Vue之动画与animate.css动画库

左手的ㄟ右手 2023-06-12 04:19 128阅读 0赞

## 前言 ##

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

## 过渡动画原理 ##

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

## 过渡 ##

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

## 动画 ##

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

## 公共化动画名 ##

*  公共化动画名
 *  顾名思义，就是将动画名提取出来，以后直接使用即可。
 *  公共化动画名步骤：
 *  1、自行随意定义修改动画名  
    公共化动画名  
    顾名思义，就是将动画名提取出来，以后直接使用即可。  
    ![在这里插入图片描述][20191031142839816.png]  
    修改类名  
    ![在这里插入图片描述][20191031142924836.png]  
    ![在这里插入图片描述][2019103114293297.png]
 *  2、不使用默认提供的命名规范，在transition标签里添加相关属性  
    （1）enter-active-class属性  
    （2）enter-leave-class属性  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]
 *  公共化动画名小结：
 *  综上所述，当某些动画应用较多时，可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。
 *  语法如下所示  
    ![在这里插入图片描述][20191031143048296.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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  Vue+animate.css动画库步骤
 *  （1）下载代码库引入  
    ![在这里插入图片描述][20191031143202440.png]
 *  （2）选择相应动画效果类名并引入，如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  至此，便可以实现vue+animate.css动画库的结合使用
 *  优势：  
    像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。
 *  注意：  
    1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class  
    2、使用时必须加入animated类名

## 动画VS过渡 ##

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

<!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="css/animate.min.css" />
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></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>

## 完毕，有问题留言小编… ##

[20191031142350278.png]: /images/20230531/f15de53742dc493387655c47dbdb7edf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/88a818f51bcf42d88b2a6d8667ebde4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/b917aa8055c54ab9ba7e7f655182f132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/0739bf43356440b6bf3fa2de99e82dc6.png
[20191031142723642.png]: /images/20230531/01d9a89945f4486eb3de16a8b4e7a02d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/5853f98eddcd4e8da7df1f9e45304495.png
[20191031142839816.png]: /images/20230531/13cf15b5b70b44aa87d4702f8a31ec9f.png
[20191031142924836.png]: /images/20230531/eb36549cc33249f48678ba7153732d52.png
[2019103114293297.png]: /images/20230531/d0db467fc4bd47a49ba0bf26699a8bc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/c45aa7bc4a4246729594b233eb3c5413.png
[20191031143048296.png]: /images/20230531/134a1cbec9764044b8a47c3f42456792.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/12989ef6733f4e63a2112375bec1f0b9.png
[20191031143202440.png]: /images/20230531/5d6aadbf5acd4725b7165578d467177c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/6997c3e0150147a58c67a0f1882c8cdc.png