1.首先下载wow插件

下载命令：npm install wowjs --save-dev

2.在项目中的main.js中进行配置

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

3.使用方法

1.在需要使用的页面中的mounted函数加入代码

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

2开始使用（在class上面加入 wow 动画参数）

<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（动画执行次数）这四个属性可选可不选。

注意（如果是循环遍历的数据就需要用watch监听来实现）

<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>

4.所有参数

特效 – 前端开发，JQUERY特效，全栈开发，vue开发

后续（日出效果）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;background-color: #0EA9B1;overflow: hidden;}img {width: 100%;height: auto;position: absolute;bottom: 0;left: 0;}img:first-child {animation: move 2s linear infinite;}img:last-child {animation: move 2s linear 0.3s infinite;}.sun {width: 100px;height: 100px;margin: 100px;position: relative;}.sun::before, .sun::after {content: "";position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;transform: translate(-50%, -50%);background: rgba(255, 255, 255, 0.8);border-radius: 50%;animation: sun 2s infinite;}.sun::after {width: 80px;height: 80px;background: rgba(255, 255, 255, 0.6);animation: sun 3s infinite;}@keyframes move {0% {bottom: 0;}50% {bottom: -50px;}100% {bottom: 0;}}@keyframes sun {0% {transform:translate(-50%, -50%) scale(1);box-shadow: 0px 0px 5px rgba(255,255,255,0.7);}50% {transform:translate(-50%, -50%) scale(1.1);box-shadow: 0px 0px 30px rgba(255,255,255,0.7);}100% {transform:translate(-50%, -50%) scale(1);box-shadow: 0px 0px 5px rgba(255,255,255,0.7);}}</style>
</head>
<body><div class="sun"></div><img src="../images/1.png" height="211" width="2000" alt="loading"><img src="../images/2.png" height="211" width="2000" alt="loading">
</body>
</html>

后续

(1)出场动画效果

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title><%= webpackConfig.name %></title><style>html,body,#app {height: 100%;margin: 0px;padding: 0px;}.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}#loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}#loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #fff;-webkit-animation: spin 2s linear infinite;-ms-animation: spin 2s linear infinite;-moz-animation: spin 2s linear infinite;-o-animation: spin 2s linear infinite;animation: spin 2s linear infinite;z-index: 1001;}#loader:before {content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #fff;-webkit-animation: spin 3s linear infinite;-moz-animation: spin 3s linear infinite;-o-animation: spin 3s linear infinite;-ms-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}#loader:after {content: "";position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #fff;-moz-animation: spin 1.5s linear infinite;-o-animation: spin 1.5s linear infinite;-ms-animation: spin 1.5s linear infinite;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}#loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #7171c6;z-index: 1000;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}#loader-wrapper .loader-section.section-left {left: 0;}#loader-wrapper .loader-section.section-right {right: 0;}.loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}.loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}.loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.loaded #loader-wrapper {visibility: hidden;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out;transition: all 0.3s 1s ease-out;}.no-js #loader-wrapper {display: none;}.no-js h1 {color: #222222;}#loader-wrapper .load_title {font-family: "Open Sans";color: #fff;font-size: 19px;width: 100%;text-align: center;z-index: 9999999999999;position: absolute;top: 60%;opacity: 1;line-height: 30px;}#loader-wrapper .load_title span {font-weight: normal;font-style: italic;font-size: 13px;color: #fff;opacity: 0.5;}.loading_bc {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);background: #fff;}.loading_loader {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-mos-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: default;width: 300px;height: 300px;}.loading_text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-animation: text 2s infinite;-moz-animation: text 2s infinite;-moz-animation: text 2s infinite;-ms-animation: text 2s infinite;-o-animation: text 2s infinite;animation: text 2s infinite;}.loading_text img {width: 150px;border-radius: 50%;}.vertical {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}.loading_horizontal {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);padding-top: 149px;}.circlesdwn {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}.circle {position: absolute;width: 15em;height: 16em;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-ms-animation: orbit 2s infinite;-o-animation: orbit 2s infinite;animation: orbit 2s infinite;z-index: 5;}.circle:after {content: "";position: absolute;width: 2em;height: 2em;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;border-radius: 100%;background: #ee84a1;}.circle:nth-child(2) {-webkit-animation-delay: 100ms;-moz-animation-delay: 100ms;-ms-animation-delay: 100ms;-o-animation-delay: 100ms;animation-delay: 100ms;z-index: 4;}.circle:nth-child(2):after {background: #ee84a1;/* Pick a color 2*/-webkit-transform: scale(0.8, 0.8);-moz-transform: scale(0.8, 0.8);-ms-transform: scale(0.8, 0.8);-o-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}.circle:nth-child(3) {-webkit-animation-delay: 225ms;-moz-animation-delay: 225ms;-ms-animation-delay: 225ms;-o-animation-delay: 225ms;animation-delay: 225ms;z-index: 3;}.circle:nth-child(3):after {background: #ffa489;/* Pick a color 3*/-webkit-transform: scale(0.6, 0.6);-moz-transform: scale(0.6, 0.6);-ms-transform: scale(0.6, 0.6);-o-transform: scale(0.6, 0.6);transform: scale(0.6, 0.6);}.circle:nth-child(4) {-webkit-animation-delay: 350ms;-moz-animation-delay: 350ms;-ms-animation-delay: 350ms;-o-animation-delay: 350ms;animation-delay: 350ms;z-index: 2;}.circle:nth-child(4):after {background: #ff6d37;/* Pick a color 4*/-webkit-transform: scale(0.4, 0.4);-moz-transform: scale(0.4, 0.4);-ms-transform: scale(0.4, 0.4);-o-transform: scale(0.4, 0.4);transform: scale(0.4, 0.4);}.circle:nth-child(5) {-webkit-animation-delay: 475ms;-moz-animation-delay: 475ms;-ms-animation-delay: 475ms;-o-animation-delay: 475ms;animation-delay: 475ms;z-index: 1;}.circle:nth-child(5):after {background: #db2f00;/* Pick a color 5*/-webkit-transform: scale(0.2, 0.2);-moz-transform: scale(0.2, 0.2);-ms-transform: scale(0.2, 0.2);-o-transform: scale(0.2, 0.2);transform: scale(0.2, 0.2);}@keyframes orbit {0% {transform: rotate(45deg);}5% {transform: rotate(45deg);animation-timing-function: ease-out;}70% {transform: rotate(405deg);animation-timing-function: ease-in;}100% {transform: rotate(405deg);}}</style></head><body><div id="app"><div class="loading_bc"><div class="loading_loader"><!-- <div class="loading_text"><img src="https://img-blog.csdnimg.cn/5369ce1725b446e7854c5673dc6e8bc2.png" alt="" class="index_logo"  /></div> --><div class="loading_horizontal"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class="circlesdwn"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></div><div class="vertical"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class="circlesdwn"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></div></div></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= webpackConfig.name %></title><!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--><style>html,body,#app {height: 100%;margin: 0px;padding: 0px;}.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}#loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}#loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-webkit-animation: spin 2s linear infinite;-ms-animation: spin 2s linear infinite;-moz-animation: spin 2s linear infinite;-o-animation: spin 2s linear infinite;animation: spin 2s linear infinite;z-index: 1001;}#loader:before {content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-webkit-animation: spin 3s linear infinite;-moz-animation: spin 3s linear infinite;-o-animation: spin 3s linear infinite;-ms-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}#loader:after {content: "";position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-moz-animation: spin 1.5s linear infinite;-o-animation: spin 1.5s linear infinite;-ms-animation: spin 1.5s linear infinite;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}#loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #7171C6;z-index: 1000;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}#loader-wrapper .loader-section.section-left {left: 0;}#loader-wrapper .loader-section.section-right {right: 0;}.loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}.loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}.loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.loaded #loader-wrapper {visibility: hidden;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out;transition: all 0.3s 1s ease-out;}.no-js #loader-wrapper {display: none;}.no-js h1 {color: #222222;}#loader-wrapper .load_title {font-family: 'Open Sans';color: #FFF;font-size: 19px;width: 100%;text-align: center;z-index: 9999999999999;position: absolute;top: 60%;opacity: 1;line-height: 30px;}#loader-wrapper .load_title span {font-weight: normal;font-style: italic;font-size: 13px;color: #FFF;opacity: 0.5;}</style></head><body><div id="app"><div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div class="load_title">正在加载系统资源，请耐心等待</div></div></div></body>
</html>

(2)沙漏

<template><div class="loader"><span class="top"></span><span class="bottom"></span></div>
</template><style scoped>.loader {width: 4.3em;height: 9.8em;font-size: 10px;position: relative;display: flex;flex-direction: column;align-items: center;justify-content: space-between;animation: rotating 2s linear infinite;
}@keyframes rotating {0%,90% {transform: rotate(0);}100% {transform: rotate(0.5turn);}
}.loader::after {content: "";position: absolute;width: 0.2em;height: 4.8em;background-color: deepskyblue;top: 1em;animation: flow 2s linear infinite;
}@keyframes flow {10%,100% {transform: translateY(3.2em);}
}.top,
.bottom {width: 3.5em;height: 3.5em;border-style: solid;border-color: saddlebrown;border-width: 0.2em 0.2em 0.6em 0.6em;border-radius: 50% 100% 50% 30%;position: relative;overflow: hidden;
}.top {transform: rotate(-45deg);
}.bottom {transform: rotate(135deg);
}.top::before,
.bottom::before {content: "";position: absolute;width: inherit;height: inherit;background-color: deepskyblue;animation: 2s linear infinite;
}.top::before {border-radius: 0 100% 0 0;animation-name: drop-sand;
}@keyframes drop-sand {to {transform: translate(-2.5em, 2.5em);}
}.bottom::before {border-radius: 0 0 0 35%;transform: translate(2.5em, -2.5em);animation-name: fill-sand;
}@keyframes fill-sand {to {transform: translate(0, 0);}
}
</style>

在vue中使用wow动画插件（下载，配置，使用，参数）相关推荐

vue中identify(生成图片验证码)插件的配置和使用
效果图 1.在vue项目的 src/ components文件夹下新建 identify.vue 文件,写入如下代码 <template><div class="s-can ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
VUE 中渲染Echarts 动画柱状图
VUE 中渲染Echarts 动画柱状图效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echart ...
Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) nam ...

在vue中使用wow动画插件（下载，配置，使用，参数）

1.首先下载wow插件

2.在项目中的main.js中进行配置

3.使用方法

4.所有参数

特效 – 前端开发，JQUERY特效，全栈开发，vue开发

后续（日出效果）

后续

(1)出场动画效果

(2)沙漏

在vue中使用wow动画插件（下载，配置，使用，参数）相关推荐

最新文章

热门文章

在vue中使用wow动画插件（下载，配置，使用，参数）

1.首先下载wow插件

2.在项目中的main.js中进行配置

3.使用方法

4.所有参数

特效 – 前端开发，JQUERY特效，全栈开发，vue开发

后续 （日出效果）

后续

(1)出场动画效果

(2)沙漏

在vue中使用wow动画插件（下载，配置，使用，参数）相关推荐

最新文章

热门文章

后续（日出效果）