Vue之过渡动画钩子函数+Velocity.js动画库

桃扇骨 2023-06-12 04:22 21阅读 0赞

## 前言 ##

*  CSS实现方式
 *  目前为止已经介绍了Vue过渡与动画实现方式，包含transition过渡类型动画和@keyframes类型动画。
 *  JS钩子函数方式+第三方库
 *  除了用CSS来实现vue的组件过渡与动画，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM即可。正如之前所说，可以配合使用第三方 JavaScript 动画库，如 Velocity.js
 *  Velocity.js→发音\[vəˈlɒsəti\]→译为高速

## 动画钩子分类 ##

*  钩子函数分为入场钩子和出场钩子，具体分类及含义如下所示
 *  1、入场钩子  
    before-enter进入过渡前  
    enter过渡运行时  
    after-enter过渡完成后  
    enter-cancelled过渡被打断时
 *  2、出场钩子  
    before-leave离开过渡运行前  
    leave离开过渡运行时  
    after-leave离开过渡运行后  
    leave-cancelled离开过渡被打断时

## 入场钩子 ##

*  首先新建个普通组件，可以实现简单显隐切换  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][20191031145418851.png]
 *  接下来结合案例来介绍下动画钩子函数
 *  （1）入场钩子before-enter进入过渡前状态  
    验证如下所示  
    ![在这里插入图片描述][20191031145455385.png]  
    ![在这里插入图片描述][20191031145500859.png]  
    验证后发现，当显示过渡动画区域，即区域入场时，触发before-enter钩子函数
 *  此外，before-enter函数还包含一个el参数，表示绑定过渡动画的元素。验证如下
 *  （1）入场钩子before-enter进入过渡前状态  
    before-enter函数之el元素参数，例如在进入过渡前将文本颜色变为红色  
    ![在这里插入图片描述][20191031145542323.png]
 *  为了方便测试，这里我将文本字体设置大点  
    ![在这里插入图片描述][20191031145556862.png]
 *  （2）入场钩子enter过渡进入完成时状态
 *  语法：
 *  enter钩子和before-enter稍微有些差异，before-enter会接受两个参数，语法为enter(el,done)，done为回调函数
 *  触发时机：
 *  当before-enter触发完毕后的下一帧，将会真正运行动画效果，整个动画效果也将放到enter这个钩子阶段。
 *  （2）入场钩子enter过渡进入完成时状态  
    案例：2s后元素字体颜色变绿  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  （2）入场钩子enter过渡进入完成时状态
 *  done回调函数：  
    当动画执行结束后需要手动去调用done回调函数，告诉vue动画执行完毕，至此才可以进行下一步操作，代码如下所示:  
    ![在这里插入图片描述][20191031145733707.png]
 *  （3）入场钩子after-enter过渡完成后
 *  执行时机：  
    在enter过渡进入完成后触发done()回调函数，告知vue动画执行完毕，下一步执行after-enter过渡完成后钩子函数。  
    要求：过渡完成后字体变黑  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][20191031145828857.png]
 *  （3）入场钩子after-enter过渡完成后
 *  为了测试效果更加明显，接下来修改下代码，将动画时长调至4s结束。
 *  即2s时字体发生变化，4s时才结束动画，如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][201910311459420.png]
 *  （4）入场钩子enter-cancelled过渡被打断  
    ![在这里插入图片描述][20191031145959835.png]  
    ![在这里插入图片描述][2019103115000359.png]
 *  入场钩子小结  
    入场钩子简单语法总结如下  
    ![在这里插入图片描述][20191031150017445.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]

# 出场钩子 #

*  出场钩子与入场钩子语法类似，自行验证即可  
    1、before-leave(el)离开过渡运行前  
    2、leave(el,done)离开过渡运行时  
    3、after-leave(el)离开过渡运行后  
    4、leave-cancelled(el)离开过渡被打断时
 *  注意：  
    leave与enter同样，接收两个参数即el和done回调函数。

## 动画钩子 ##

*  小结：  
    上面的钩子函数中可以进行任何你想做的DOM操作。
 *  小技巧：  
    如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果，这时你就可以用钩子函数，只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。

## Velocity.js动画库 ##

*  **【前言】**
    
     *  随着互联网越来越丰富多样，网页端的美化和新技术层出不穷，作为一个网站的浏览者，更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效。
     *  网页的交互动效大概分为 css动画，js动画 。
     *  案例链接：http://www.bootstrapmb.com/item/2084/preview
 *  **为什么是velocity不是jquery？**
    
     *  当前，如何快速制作js动效，许多人可能会首先想到使用jquery。
     *  使用jquery制作的各种动效在网络上也非常丰富。jquery的优点不言而喻，简单易用，高效开发。但要知道jquery动画性能并不是最优的。
     *  因为jquery想要实现的目标太多，动画性能上就不可避免做出妥协。因此要制作高性能js动画，可能不得不放弃jquery，转而使用原生js制作动画。那有没有一种js高性能动效库，既像jquery一样简单易用，动画又高性能？这就是velocity.js动画库了。
 *  **js动画**
    
     *  JS动画的库非常多，各有各的有点，比如jquery自带的animate动画还有 webGL,或者利用canvas，SVG等实现其他效果，本节来讲的就是众多库中的其中一个 velocity.js 动画库。
     *  velocity.js 既可以单独用JavaScript使用，也可以配合jquery使用，使用方法(注意先将velocity.js下载好后在body标签下引入，然后在新script标签中书写效果实现语法即可)
 *  **JS动画VS传统css动画：**
    
     *  既然我们大概了解了这两类动画，接下来分析下两者区别
     *  1、css动画→由于css3可以根据css属性自定义动画，所以这类动画的优 点就是不用进行计算和更改dom 会显得非常流畅
     *  2、JS动画→js动画拥有强大的性能，并且优于css动画的特点就是  
        既然是根据js来改变属性值，所以没有css那样的局限性，可以实现更多的功能和动效，或许有人说js动画某些库会很慢，其实js动画本质很快，只是jquery让它慢了下来。因为有时候由于配合jquery使用，所以由于jquery本身的一些功能，所以在实现的时候就会显得很慢。
 *  **Velocity.js动画库优点**
    
     *  1、Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。
     *  2、Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
     *  3、有几十种类似animate.css的预定义动画api
     *  4、支持自定义动效，拼装队列动效等等
     *  5、动画回调 比如 Begin & Complete & Progress 回调函数
 *  **Velocity.js动画库趣点：**
    
     *  velocity会自动记录下动画执行的路径、时间以及效果等，然后会按动画原效果返回。也就是说，不管你动画效果设计得再复杂，如果要动画原路返回，只需一句代码
 *  动画效果原路返回。如果我们做了一个比较炫酷或者比较复杂的动画效 果，然后需要制作动画原路返回的效果，只需如此：  
    ![在这里插入图片描述][20191031150549814.png]
 *  接下来介绍个JS常用动画库Velocity.js发音\[vəˈlɒsəti\]→译为高速
 *  首先打开Velocity官网
    
     *  链接：http://velocityjs.org
 *  其他相关API和语法可以参阅Velocity.js 中文文档
    
     *  链接：http://shouce.jb51.net/velocity/index.html

# Vue+Velocity.js #

*  接下来结合具体案例来介绍下Vue+Velocity.js实现相关动效
 *  （1）引入Velocity.js文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  （2）接下来清除原先动画钩子创建的自定义动画，开始使用Velocity.js实现特效，代码重置如下所示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]

*  （3）结合动画钩子，设定入场前透明度为0，如下所示  
    ![在这里插入图片描述][20191031150849303.png]
 *  （4）入场前为0，动画开始执行到enter阶段时，希望透明度由0慢慢变为1，即设置入场动画过程透明度为1，结合Velocity.js代码库，代码如下所示  
    ![在这里插入图片描述][20191031150905664.png]
 *  （5）complete完结属性  
    目前为止，测试后发现可以出现效果，但是存在BUG…  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][20191031150944198.png]  
    （1）需要用到Velocity实例的complete完结属性，表示Velocity动画执行完毕  
    （2）给complete属性赋值为done回调函数，表示该vue过渡动画阶段完结，可以接着往下进行

## 课堂小结 ##

*  小结：
    
     *  目前为止，便已经可以使用Vue中动画钩子实现JS动画效果，并且可以结合Velocity.js动画库进而通过简单语法实现一些酷炫的动画效果。
     *  关于Velocity.js的其他用法可以去Velocity官网阅读相关API测试即可。  
        **Vue之过渡动画钩子函数+Velocity.js动画库具体代码如下：**

<!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;
    			}
    		</style>
    		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
    		<script src="js/velocity.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="root">
    			<transition @before-enter="beforeEnterFn" @enter="enterFn" @after-enter="afterEnterFn" @enter-cancelled="enterCancelledFn"
    			 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;
    					},
    					/*过渡前*/
    					beforeEnterFn(el) {
    						console.log('入场前')
    						console.log(el)
    						el.style.opacity = 0;
    					},
    					/*过渡中*/
    					enterFn(el, done) {
    						// setTimeout(()=>{
    						// 	el.style.background = 'green';
    						// },2000)
    						// setTimeout(()=>{
    						// 	done();
    						// },4000)
    						Velocity(el, {
    							opacity: 1
    						}, {
    							duration: 3000,
    							complete: done
    						})
    					},
    					/*过渡完毕*/
    					afterEnterFn(el) {
    						console.log('过渡完毕')
    					},
    					enterCancelledFn() {
    						console.log('过渡终止')
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/7520e03ae1d64bda9841ad13eb808ced.png
[20191031145418851.png]: /images/20230531/85ba033485614306896f9a2e08626607.png
[20191031145455385.png]: /images/20230531/35fb296a78d247c9b08588386774883c.png
[20191031145500859.png]: /images/20230531/a9e8e596098c46eca0d7aae381865565.png
[20191031145542323.png]: /images/20230531/c235ba927f1e4733abff6ca262017a91.png
[20191031145556862.png]: /images/20230531/21b020ba23ed422e9d9363f2ec627945.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/1922991258194eccb75ee965c3c85ce6.png
[20191031145733707.png]: /images/20230531/2278a9fcc34f4632b8d69560b895132b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/3d1768cb4b31415d927595007b252c89.png
[20191031145828857.png]: /images/20230531/4d1c61393ff2445b8bd371d1d30deed8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/a4cb60ec25074906b5ba572524b47da2.png
[201910311459420.png]: /images/20230531/358621a9ab2f4b83ac270d0def5ffbc1.png
[20191031145959835.png]: /images/20230531/48eeec777c18438cbf920db7d48b0fb9.png
[2019103115000359.png]: /images/20230531/0072c1afb18d48d695904b66a2dff051.png
[20191031150017445.png]: /images/20230531/fb18f2f37ddc4982846585ff341a06bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/8f05059b46774c9ba456949fc3052ce9.png
[20191031150549814.png]: /images/20230531/701f20c9f8354076898211ff2044cabb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/43d41f7090fa4028b3e3485455417cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/282f859daca14850b0abd22afbe4e8da.png
[20191031150849303.png]: /images/20230531/6380b865fc854579a63adc2870f467c7.png
[20191031150905664.png]: /images/20230531/a5beec66d6c54ffea38c314d7733845a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/b0f5b234e2c54ecaa13f22ea8621fb35.png
[20191031150944198.png]: /images/20230531/bc30fa2f73a1492fbe291620fadcce39.png