场景
前端同事使用vue开发网页，并需要使用wowjs进行动画效果展示。但wowjs并未生效，找不到原因。
解决
- 同事直接在index.html加载
animate.css，我改为安装wowjs
npm install wowjs
- 在
main.js加入一下代码
import wow from 'wowjs'
Vue.prototype.$wow=wow
import 'wowjs/css/libs/animate.css'
- 在需要展示动画的组件中加入以下代码
<script>
export default {
name: "home",
mounted() {
new this.$wow.WOW().init()
}
};
</script>
- 组件添加相应动画css
<div class="wow slideInUp" data-wow-delay="500ms">
动画
</div>
踩坑
npm 安装wowjs的时候，自动会安装animate.css，但是css文件在node_modules/wowjs目录下。
image.png
所以如果直接引入
import 'animate.css'是不能生效的，改为import 'wowjs/css/libs/animate.css'动画就正常演示了。
网友评论