Vue方向：Vue中如何去使用js的动画效果以及使用Velocity.js中的动画库函数

1、Vue中的js动画

Vue中的js动画是通过vue提供的动画钩子函数来绑定事件的，然后在事件函数中处理对应的动画。

1.1、动画入场的钩子函数

before-enter：动画入场运动前一刻执行（自动执行）
enter：动画运动时执行
after-enter：在动画enter函数中运动完毕并调用回调done时执行

1.1.1、before-enter钩子

我们先来打印一下before-enter的参数是什么

before-enter参数.png

依据打印结果来看：before-enter开始动画前的参数就是一个单纯的动画dom元素（这个钩子函数是自动执行的）

1.1.2、enter钩子

动画运行的钩子函数， done是动画运行完成后的回调函数，当动画运行完成以后执行done函数会触发after-enter动画钩子函数的运行

enter参数.png

1.1.3、after-enter动画执行完的钩子

效果图.gif

1.2、注意事项

done函数的错误写法

setTimeout(() => {
        dom.style.color = 'red'
        done()
      }, 1000);

image.png

解决方案
加入定时器延时

enterHandler(dom,done){
      console.log(arguments)
      setTimeout(() => {
        dom.style.color = 'red'
      }, 1000);
      setTimeout(() => {
        done()
      }, 2000);
    },

1.3、出场动画

出场动画与入场一样的使用
before-leave：准备出场
leave：出场动画执行函数
after-leave：出场执行后
使用JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则过渡会立即完成。对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

    
Hello wold

2、动画示例

2.1、效果展示

动画2.gif

3、Velocity.js动画库

首先进入官网下载Velocity.js

3.1、引入

3.2、如何使用

3.2.1、首先创建一个公共的js目录

image.png

3.2.2、将官网上下载的Velocity.js放在该目录下（或者拷贝js代码，创建一个新的文件放进去）

image.png

3.2.3、引入

import Velocity from "@/vendor/velocity";

3.2.4、使用

3.2.5、效果展示

velocity.gif

4、多个元素之间的动画切换

太累了，明天再学.....