在
vue项目应用动画时，可以在enter，level等钩子函数中使用Velocity动画库。
相关链接
2、1.x 官方文档
3、1.x 中文文档
简介
Velocity 是一个动画引擎，其API与jQuery的$.animate()相同。它可以和jQuery一起使用，也可以不使用。它的速度快得令人难以置信，而且它具有颜色、动画、变换、循环、缓和、支持SVG和滚动等功能。
引用方式
1、 npm i velocity-animate -S，此命令安装的是 1.x
2、在项目中引入库import Velocity from 'velocity-animate'，可使用基本动画、指令等
3 velocity.ui.js 是 velocity.js 的 动画插件，我们可以用它快速创建炫酷的动画特效，它依赖于 velocity.js，使用命令import 'velocity-animate/velocity.ui.js' 可实现引入
问题解决
1、问题： velocity@1.x 版本，在 @vue/cli@5.x版本中引入 velocity.ui.js，项目会报错，错误信息如下：
ERROR in ./node_modules/velocity-animate/velocity.ui.js
Module not found: Error: Can't resolve 'velocity' in 'F:\WebstormProjects\demo\animate-vue-cli5\node_modules\velocity-animate'
Did you mean './velocity'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, F:\WebstormProjects\demo\anim
ate-vue-cli5\node_modules, F:\WebstormProjects\demo\animate-vue-cli5\node_modules\@vue\cli-service\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of request
s in the current directory too.
解决方案：
在 vue.config.js中添加配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
externals: {
+ velocity: 'velocity-animate'
}
}
})
