本文转自: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>

vue项目中引入animate.css和wow.js的更多相关文章

  1. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  2. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  3. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  4. vue 项目如何使用animate.css

    Animate.css是一款酷炫丰富的跨浏览器动画库,它在GitHub上的star数至今已有5.3万+. 在vue项目中我们可以借助于animate.css,用十分简单的代码来实现一个个炫酷的效果!( ...

  5. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  6. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  7. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  8. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  9. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

随机推荐

  1. Jenkins 自动化部署上线

    转载于互联网 jenkins自动化部署项目,通过jenkins 部署来节省运维时间,不需要手动cp上线及版本发布 Jenkins 自动化部署上线 Jenkins Jenkins 自动化部署上线一.Je ...

  2. Windows Qt 项目中文乱码

    在头文件中加入 #if _MSC_VER >= 1600 #pragma execution_character_set("utf-8") #endif

  3. Linux Mint设置自定义快捷键

    我使用的是 Linux Mint 19.2 Tina 先搜索键盘,把键盘的功能调出来 快捷键--->>自定义快捷键--->>添加自定义快捷键 名称可自定义(这里我定义的是“截图 ...

  4. [ML] Linear Discriminant Analysis

    虽然名字里有discriminat这个字,但却是生成模型,有点意思. 判别式 pk 生成式 阅读:生成方法 vs 判别方法 + 生成模型 vs 判别模型 举例: 判别式模型举例:要确定一个羊是山羊还是 ...

  5. scikit-learn机器学习(二)逻辑回归进行二分类(垃圾邮件分类),二分类性能指标,画ROC曲线,计算acc,recall,presicion,f1

    数据来自UCI机器学习仓库中的垃圾信息数据集 数据可从http://archive.ics.uci.edu/ml/datasets/sms+spam+collection下载 转成csv载入数据 im ...

  6. MVP模式的学习

    简书: http://www.jianshu.com/p/f6fd9656f619 Github: https://github.com/tsaievan/YFMVPDemo

  7. jmeter性能测试的指标分析和定义

    通常情况下,性能测试关注被测对象的时间与资源利用特性及稳定性.时间特性,即被测对象实现业务交易过程中所需的处理时间,从用户角度来说,越短越好.资源利用特性,即被测对象的系统资源占用情况,一般web系统 ...

  8. Nginx sticky模块实现session粘滞

    一:下载,解压nginx sticky模块. 1 2 3 # cd /usr/local/src # wget http://nginx-sticky-module.googlecode.com/fi ...

  9. HTTPS工作原理 HTTP协议数据结构分析 HTTP和HTTPS协议的不同之处

    HTTP有以下三个缺点:无加密,无身份认证,无完整性保护,因此所谓的HTTPS,它其实就是HTTP+加密+身份认证+完整性保护.HTTPS并不是一种新的协议,在通信接口使用了SSL和TLS协议而已.H ...

  10. OpenCV2.源码_编译&调试

    1.VS 调试第三方库源码 - writeeee的专栏 - CSDN博客.html(https://blog.csdn.net/writeeee/article/details/82692770) Z ...