在vue中使用wow插件以及配置参数等

1.安装

npm install wowjs --save-dev

2.在项目的main.js配置

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

3.在需要使用的页面中mounted函数中写入下列代码

 mounted() {this.getList();this.$nextTick(() => {new this.$wow.WOW().init();});},

4.在需要使用的元素上绑定class 例:

<div class="wow slideInLeft"
data-wow-duration="2s"
data-wow-delay="5s"
data-wow-offset="10"
data-wow-iteration="10"></div>
//   类名前面的wow是每一个带动画的元素都要加的，
//   slideInLeft就是说明动画样式
//   data-wow-duration（动画持续时间)
//   data-wow-delay（动画延迟时间）
//   data-wow-offset（元素的位置露出后距离底部多少像素执行）
//   data-wow-iteration（动画执行次数）

还有一种特殊情况就是遍历的元素解决如下

<template><div class="app"><div class="classify"><div class="wrap"><div class="title"><span>classify Worthy</span></div><div class="classifyInfo"><div:class="'list' + item.bounceInUp":data-wow-delay="item.delay"v-for="(item, index) in classifyInfo":key="index"><div class="img"><img :src="item.url" alt="" /></div><div class="text"><span>{{ item.title }}</span><p>{{ item.content }}</p></div></div></div></div></div></div>
</template><script>
export default {data() {return {classifyInfo: "",};},methods: {getList() {this.$axios.get("/dataInfo.json").then((res) => {this.classifyInfo = res.data.Home.classify;}).catch((error) => {console.log(error);});},},watch: {classifyInfo() {this.$nextTick(() => {new this.$wow.WOW().init();});},},mounted() {this.getList();this.$nextTick(() => {new this.$wow.WOW().init();});},created() {},
};
</script>

5.wow常用参数

wow rollIn           从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn        从原位置出现，由小变大(超出设定值)，再变小(小于设定值)，再回归设定值、透明度从100%变化至设定值
wow bounceInUp      从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown    从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft    从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight   从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp       从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上) (如果元素在最下面，会撑开盒子高度)
wow slideInDown     从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft     从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight    从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn    从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse           原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX         原位置后仰前栽、透明度从100%变化至设定值
wow flipInY         原位置左右旋动、透明度从100%变化至设定值
wow bounce          上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake           左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing           从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU       原位置不变、直接从不显示到显示（没有过渡效果）
wow wobble          原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

在vue中使用wow插件以及配置参数等相关推荐

Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
Logstash数据处理服务的输出插件Output配置参数详解
Logstash数据处理服务的输出插件Output配置参数详解 1.将日志数据存储到Elasticsearch集群 output配置字段是将收集的日志数据存输出到生存储中,一般都是elasticsea ...
vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
快速入门在Vue中使用滑动插件Swiper
前言 swiper 开源.免费.强大的滑动插件. swiper中文网 https://www.swiper.com.cn/ Swiper4中文API https://www.swiper.com.cn ...
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1.在项目的根目录中安装插件 npm install vue-i18n 2.新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包文件夹与 ...
vue中使用wow.js
首先安装wow npm install wowjs --save-dev animate.css会自动安装在 main.js中引用 require('animate.css/animate.mi ...
面试官：Vue中组件和插件有什么区别？
一.组件是什么回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度 ...

在vue中使用wow插件以及配置参数等

1.安装

2.在项目的main.js配置

3.在需要使用的页面中mounted函数中写入下列代码

4.在需要使用的元素上绑定class 例:

还有一种特殊情况就是遍历的元素解决如下

5.wow常用参数

在vue中使用wow插件以及配置参数等相关推荐

最新文章

热门文章

在vue中使用wow插件 以及配置参数等

1.安装

2.在项目的main.js配置

3.在需要使用的页面中mounted函数中写入下列代码

4.在需要使用的元素上绑定class 例:

还有一种特殊情况就是遍历的元素 解决如下

5.wow常用参数

在vue中使用wow插件 以及配置参数等相关推荐

最新文章

热门文章

在vue中使用wow插件以及配置参数等

还有一种特殊情况就是遍历的元素解决如下

在vue中使用wow插件以及配置参数等相关推荐