vue中使用wow.js

首先安装wow

npm install wowjs --save-dev

animate.css会自动安装

在 main.js中引用

require('animate.css/animate.min.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() + ">")}
})

我这边是直接弄成全局的，省的每个组件再引用一次，也不用每次写配置，如果用的地方少，可以单独在组件中引用配置

不要在main.js中 init() 因为vue中还没有渲染，会报找不到dom操作
所以到组件中 mounted中 init

mounted() { this.$wow.init()
}

异步加载的话使用watch

watch: {xxxx() {this.$nextTick(() => { // 在dom渲染完后,再执行动画this.$wow.init()})}
}

最后按照wow的使用方式加入class 就可以了

<div class=" wow slideInUp">xxxxxxxxxx</div>

vue中使用wow.js相关推荐

vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
在VUE中使用wow.js
第一步:安装插件 npm install wowjs --save-dev 第二步:引入的main.js中 import animated from 'animate.css' import 'wow ...
vue 2.x中使用wow.js
安装 npm install wowjs --save animate.css 会被自动安装也可以手动安装 animate.css npm install animate.css --save 引入 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
在vue中使用three.js
vue中使用three.js vue 安装: npm install --save three 在要使用的页面中引入three.js import * as Three from 'three' 参考 ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...

vue中使用wow.js

vue中使用wow.js相关推荐

最新文章

热门文章