vue 2.x中使用wow.js
安装
npm install wowjs --save
animate.css 会被自动安装
也可以手动安装 animate.css
npm install animate.css --save
引入
方法一、main.js 中直接引入
import wow from 'wowjs'
import 'wowjs/css/libs/animate.css';
Vue.prototype.$wow = wow
在子组件中使用
//new this.$wow.WOW().init()
//或者
var wow = new this.$wow.WOW({boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true,live: true
});
wow.init();
方法二、 直接在子组件中使用wow.js
import { WOW } from 'wowjs'
mounted() { new WOW().init()
}
使用中wow.js 的四个属性
data-wow-duration(动画持续时间)
data-wow-delay(动画延迟时间)
data-wow-offset(元素的位置露出后距离底部多少像素执行)
data-wow-iteration(动画执行次数)(无限次:infinite)
//<div data-wow-delay="2s" data-wow-duration="3s" class="wow fadeInDown right"> 示例
可写可不写根据自己需求
参数配置
new WOW({
boxClass: ‘wow’, // default
animateClass: ‘animated’, // default
offset: 150, // default
mobile: true, // default
live: true, // default
callback: function(box) {
console.log(“WOW: animating <” + box.tagName.toLowerCase() + “>”)
}
})
注意
当我们使用npm直接安装animate.css时 和引入的wow.js 连带下载的路径是不同的
import 'animate.css'
所以在使用的时候注意加以区分!!看自己是引用的哪个css文件,然后引用相应的类名,否则可能会导致动画没有效果。
而且需要注意
当使用的类名有前缀animate__,也就是使用的不是通过安装wowjs时自动安装的animate.css时,wowjs设置的动画延迟属性会有bug.比如设置进入动画时,元素会先显示出来,然后再过延迟时间后执行进入动画。
vue 2.x中使用wow.js相关推荐
- vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
- animate.css 在 vue 脚手架中结合wow.js的应用方法详细介绍
简介 众所周知,animate.css是非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画,但是不兼容IE8及以下版本,就算用jq控制,性能也不是很好. wowjs向下滚动页面时显示CSS动 ...
- Vue使用Animate.css和WOW.js(AOS.js)来实现页面滚动触发动画
1.安装wowjs(WOW.js – 让页面滚动更有趣_dowebok) 在vue中使用: 首先install: npm install wowjs --save,安装的同时也会安装好animate. ...
- Vue——整合与中文化Moment.js解决方案
基本概念 Moment.js:JavaScript 日期处理类库 官方文档 http://momentjs.cn/docs/ 解决方案 安装 npm install moment --save 直接引 ...
- 在VUE中使用wow.js
第一步:安装插件 npm install wowjs --save-dev 第二步:引入的main.js中 import animated from 'animate.css' import 'wow ...
- vue中使用wow.js
首先 安装wow npm install wowjs --save-dev animate.css会自动安装 在 main.js中 引用 require('animate.css/animate.mi ...
- Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
- 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景 在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
- 3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
最新文章
- Winform界面中主从表编辑界面的快速处理
- ftp 工具_ftp,ftp工具哪个好用
- ubuntu下google浏览器(chromium)flash插件安装
- Shell --- 批量修改文件后缀脚本
- Collection和Collections的区别是什么
- i红枣 建议:程序员要多吃点红枣
- PostgreSQL 12 的同步流复制搭建及主库hang问题处理与分析
- Docker学习总结(62)——docker-compose.yml 详细说明
- ----------------------------------------spring 整合jdbc---------------------
- linux php 入侵,入侵linux教程 - 冷漠 ' Blog - Focus on Information Security !
- 两种分布式锁实现方案(一)
- 065 循环导入问题
- uni-app uni.request简单封装(请求头配置及response处理)
- windows使用scrapy爬取微信评论
- UNCTF 2022 部分WP
- Android学习计划
- 汉诺塔问题——递归算法
- SpringMVC 关于日期(Date)的接收与返回
- 《数学建模简明教程--基于python》学习笔记-第二章-绘图与解方程组-课后习题解答
- 水滴宣布完成D轮2.3亿美元融资,AI与大数据是未来投入重点