vue中使用woo.js + animate.css

安装

npm install animate.css --save
npm i wowjs

引入并绑定到原型方法

import 'animate.css'
import wow from 'wowjs'
Vue.prototype.$wow= wow

app.vue中全局使用

  mounted() {let options = {//默认为trueoffset:'150',live: false};new this.$wow.WOW(options).init();},

在组件上添加类名、使用

<div class="home-banner" data-wow-duration="1s" class="wow.animate__animated animate__fadeInLeft"></div>

类名格式 bounceInLeft 见

https://www.kettle.net.cn/animate/index.html

https://github.com/graingert/wow

.wow.animate__animated.animate__bounceInLeft
.wow.animate__animated.animate__rubberBand
.wow.animate__animated.animate__bounceInRight
.wow.animate__animated.animate__bounceInDown
.wow.animate__animated.animate__fadeInDown
.wow.animate__animated.animate__bounceIn
.wow.animate__animated.animate__flipInX
.wow.animate__animated.animate__slideInDown
.wow.animate__animated.animate__pulse
.wow.animate__animated.animate__fadeInLeft

测试版本：

"vue": "^2.5.17",
"wowjs": "^1.1.3""animate.css": "^4.1.1",

vue中使用woo.js + animate.css相关推荐

Vue中引入和使用animate.css
1.npm install animate.css --save 2.在main.js中 import animated from 'animate.css' Vue.use(animated) 3. ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
Vue——在vue中，动态js改变css样式 (css 层叠模式)
vue文件 <el-table ref="myTable"> </el-table> <button @click="click" ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
在VUE中使用wow.js
第一步:安装插件 npm install wowjs --save-dev 第二步:引入的main.js中 import animated from 'animate.css' import 'wow ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...
html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库基础示例 1.把下载好的 ...

vue中使用woo.js + animate.css

vue中使用woo.js + animate.css相关推荐

最新文章

热门文章