vue3 + wow + animate

vue2 与 vue3 中引入animate 操作一样，使用方法可见 animate官网.

npm 安装 animate

npm install animate.css --save

在main.js中引入animate.css

import 'animate.css'

接下来vue2 与 vue3 使用wow略有不同

vue2使用wow

// 安装 wowjs
npm install wowjs --save-dev

在文件中使用wowjs
1、在 main.js 中 全局引入 wowjs

import wow from 'wowjs'
Vue.prototype.$wow = wow

在需要加载动画的 .vue文件中使用

mounted() {
  new this.$wow.WOW().init()
}

2、在需要的地方引入wowjs

import {WOW} from 'wowjs' 
mounted() { new WOW().init() }

或

import wow from 'wowjs' 
mounted() { new wow.WOW().init() }

vue3引入wowjs

按照vue2的方式引入wowjs，会报错 Cannot set property ‘getPropertyValue’ of undefined，如图：

经过查看wowjs代码，通过console.log(this)，发现wowjs中 this对象undefined

后续的解决方案是：

方案一：

将wow.js文件放在项目中的public文件中，并在index.html文件中引入

<script type="text/javascript" src="public/wow.js"></script>
<script type="text/javascript">
  new WOW().init()
</script>

使用动画的 .vue，正常使用就行

<p class="wow animate__animated animate__fadeInLeft">
	<img src="../../assets/images/images/img1.png">
</p>

方案二：
将wow.js放在assets文件中（根据自己项目习惯，将wowjs放在项目中）

在需要动画效果的 .vue 文件中引入wow.js文件

import '@/assets/wow.js'
mounted() {
  new WOW().init()
}

重点在于修改wow.js文件
非压缩wow.js文件中，找到最后一行，call(this)

将 call(this)中的 this 改为 window 即
call(window)

最后，本想不修改wow.js文件，想着引入wow后，改变其this指向，奈何功力不够，还未成功，欢迎大家给出意见，后续修改成功，会补充到此文章中