VUE之动画与animate.css动画库

前言

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

过渡动画原理

• 在进入/离开的过渡中，会有 6 个 class 切换：
• v-enter（插入）类原理—动画流程概念图
  
• v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除
• v-leave（移除）类原理—动画流程概念图：
  
• 同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)

概念图

过渡

• 首先回顾下过渡效果的实现
  

动画

• 借助fade-leave-active和fade-enter-active贯穿整个过程的特性，可以这样去写动画效果
• （1）首先将CSS代码修改如下
  
• （2）定义+调用动画效果
  

公共化动画名

• 顾名思义，就是将动画名提取出来，以后直接使用即可。
• 公共化动画名步骤：
• 1、自行随意定义修改动画名
  
• 2、不使用默认提供的命名规范，在transition标签里添加相关属性
• （1）enter-active-class属性
• （2）enter-leave-class属性
  
• 公共化动画名小结：
• 综上所述，当某些动画应用较多时，可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。
• 语法如下所示
  

Vue+animate.css动画库

• 【前言】
• 既然现在可以自己定义enter-active-class和leave-active-class动画类名，决定相关动画效果，借助这个特性，可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。
  
• Vue+animate.css动画库步骤
• （1）下载代码库引入
  
• （2）选择相应动画效果类名并引入，如下所示
  
• 至此，便可以实现vue+animate.css动画库的结合使用
• 优势：
• 像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。
• 注意：
• 1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class
• 2、使用时必须加入animated类名
• CSS 动画与CSS 过渡用法类似，区别在于
• ①在过渡中v-enter类名在元素被插入之前生效，在元素被插入之后的下一帧移除，即在节点插入 DOM 后会立即删除
• ②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animation end 事件触发时删除

Vue之动画与animate.css动画库代码

	
	
	
	
	
	


	

		
			

		
		toggle
	
	

以上就是VUE之动画与animate.css动画库的见解，若有疑问请联系小编!