vue项目中引入animate.css和wow.js

本文转自：https://blog.csdn.net/liyunkun888/article/details/85003152

               https://www.zhuimengzhu.com/content/article/id/87.html

一、场景
在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 WOW.js 和 animate.css 来实现页面滚动加载元素动画

二、引入和使用
引入和使用分为两种，一种是标签直接引入即可，另外一种就是 vue-cli 搭建的项目用npm安装引入

第一种很简单，不过多介绍，主要说 vue-cli 中的引入

1.npm 安装 wow.js，安装后 animate.css 会自动安装

npm install wowjs --save-dev

2.在 main.js 中引入 animate.css

import 'animate.css'

 

 

3.在需要的组件中引入 wow.js

import { WOW } from 'wowjs'
mounted(){new WOW().init();}//参数配置都是默认的话，有这句即可。第四步可不加。

4.在 mounted() 生命周期钩子中初始化

mounted(){

var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true
})
wow.init();

}
5.在需要动画的元素上面加上类名 wow 和 animation.css 动画的 class 即可，还可以加上 data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和 data-wow-iteration（动画执行次数）这四个属性可选可不选

<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>

 

转载于:https://www.cnblogs.com/colorful-paopao1/p/11376040.html