vue使用wow.js

先安装

npm install wowjs --save-dev

注意："animate.css"版本要选择: "^3.7.2 要不然动画不显示
然后再main.js

import 'animate.css'
import {WOW} from 'wowjs'
Vue.prototype.$wow = new WOW({boxClass: 'wow', // defaultanimateClass: 'animated', // defaultoffset: 150, // defaultmobile: true, // defaultlive: true, // defaultcallback: function(box) {console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")}
})

data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）

动画演示地址
https://animate.style/

vue使用wow.js相关推荐

vue页面滚动动画——wow.js教程
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. 缺陷:当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退.(即动画仅出现一次!) 官网地址 https://www.de ...
Vue使用Animate.css和WOW.js（AOS.js）来实现页面滚动触发动画
1.安装wowjs(WOW.js – 让页面滚动更有趣_dowebok) 在vue中使用: 首先install: npm install wowjs --save,安装的同时也会安装好animate. ...
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
vue中使用wow.js
首先安装wow npm install wowjs --save-dev animate.css会自动安装在 main.js中引用 require('animate.css/animate.mi ...
vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
vue 2.x中使用wow.js
安装 npm install wowjs --save animate.css 会被自动安装也可以手动安装 animate.css npm install animate.css --save 引入 ...
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法: 第一种方法:npm安装包animate.css和wow.js 第二种方法:静态资源的引入第一种方法: 1.引入静态资源包静态资源包,需要注意的是.必须放到static文件夹下面 < ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
animate.css 在 vue 脚手架中结合wow.js的应用方法详细介绍
简介众所周知,animate.css是非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画,但是不兼容IE8及以下版本,就算用jq控制,性能也不是很好. wowjs向下滚动页面时显示CSS动 ...

vue使用wow.js

vue使用wow.js相关推荐

最新文章

热门文章