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

前言

• 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离开过渡被打断时

入场钩子

• 首先新建个普通组件，可以实现简单显隐切换
  
• 接下来结合案例来介绍下动画钩子函数
• （1）入场钩子before-enter进入过渡前状态
• 验证如下所示
  
• 此外，before-enter函数还包含一个el参数，表示绑定过渡动画的元素。验证如下
• （1）入场钩子before-enter进入过渡前状态
• before-enter函数之el元素参数，例如在进入过渡前将文本颜色变为红色
  
• 为了方便测试，这里我将文本字体设置大点
  
• （2）入场钩子enter过渡进入完成时状态
• 语法：
• enter钩子和before-enter稍微有些差异，before-enter会接受两个参数，语法为enter(el,done)，done为回调函数
• 触发时机：
• 当before-enter触发完毕后的下一帧，将会真正运行动画效果，整个动画效果也将放到enter这个钩子阶段。
• 案例：2s后元素字体颜色变绿
  
  
  
• done回调函数：
• 当动画执行结束后需要手动去调用done回调函数，告诉vue动画执行完毕，至此才可以进行下一步操作，代码如下所示