Vue+wow.js+animate.css实现动画效果

1.介绍

Wow.js 是一个轻量级的 JavaScript 库，用于在网页滚动时实现动画效果。基于 CSS3 的动画库 Animate.css，并通过触发 CSS 动画类来创建各种引人注目的过渡和动画效果。

使用 Wow.js，可以很容易地为网页中的元素添加动画效果，比如淡入、滑入、缩放等。当用户滚动到指定位置时，Wow.js会自动触发相应的动画效果，为用户提供更加流畅和有趣的浏览体验。

Wow.js 的优点在于简单易用，只需几行代码即可实现各种动画效果，并且支持自定义动画样式和回调函数。这使得 Wow.js 成为开发人员和设计师们在构建交互式网页时的有力工具，为用户提供更加吸引人的视觉效果。

2.wow.js官网地址wow.js

3.效果展示

（觉得官网动画很有意思，搬运过来了哈哈哈）

vue+wowjs+animate动画

4.npm下载资源


npm install wowjs --save-dev
npm install animate.css --save

5.为了方便后期修改动画animate.css代码，可以将node_modules/wowjs/libs/animate.css复制到assets/css/animate.css里面

在这里插入图片描述

5.mian.js引入

// 引入animate.css
import 'animate.css'
// import animated from 'wowjs/css/libs/animate.css';//不需要后期修改动画可以直接使用该代码
import animated from './assets/css/animate.css';
//这里需要将样式用起来，
Vue.use(animated);

6.实现，元素隐藏2秒后显示且加载动画。使用的swing动画效果需要在0%和20%的时候添加opcity属性，先隐藏再显示
在这里插入图片描述

<template><divclass="textClass wow swing"data-wow-duration="2s"data-wow-delay="2s"style="visibility: hidden;animation-delay: 2s; animation-name: swing;"><imgclass=""src="https://wowjs.uk/img/wow-logo.jpg"style="width: 86%;"/></div><template/><script>
import { WOW } from "wowjs";//在需要动画的页面引入
export default {name: "wows",components: {},data() {return {};},onload() {console.log(123);},mounted() {let wow = new WOW({boxClass: "wow", //需要执行动画的元素的 classanimateClass: "animated", //animation.css 动画的 classoffset: 150, //距离可视区域多少开始执行动画mobile: true, //是否在移动设备上执行动画live: true //异步加载的内容是否有效});wow.init();}
};
</script>
<style scoped>
.span3 {flex: 1;display: flex;justify-content: center;
}.textClass {/* height: 80vw; *//* background-color: lightblue; */text-align: center;display: flex;justify-content: center;align-items: center;padding-top: 15vw;
}
</style>

7.完整效果代码

<template><div><divclass="textClass wow swing"data-wow-duration="2s"data-wow-delay="2s"style="visibility: hidden;animation-delay: 2s; animation-name: swing;"><imgclass="againBtnBox_img"src="https://wowjs.uk/img/wow-logo.jpg"style="width: 86%;"/></div><div class="container111 circles"><div class="row"><divdata-wow-delay="0.5s"class="span3 wow rollIn"style="visibility: visible; animation-delay: 0.5s; animation-name: rollIn;"><p class="circle bg-green">such easy</p></div><divdata-wow-delay="0.5s"class="span3 wow bounceInDown center"style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;"><imgsrc="https://wowjs.uk/img/wow-1.gif"height="100"class="wow animated"style="visibility: visible;height: 25vw;"/></div><divdata-wow-delay="0.5s"class="span3 wow lightSpeedIn"style="visibility: visible; animation-delay: 0.5s; animation-name: lightSpeedIn;"><p class="circle bg-green">very ES</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: visible; animation-name: rollIn;"><imgsrc="https://wowjs.uk/img/wow-3.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow pulse"style="visibility: visible; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: pulse;"><p class="circle bg-green">WOW</p></div><divclass="span3 wow bounceInRight center"style="visibility: visible; animation-name: bounceInRight;"><imgsrc="https://wowjs.uk/img/wow-12.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divclass="span3 wow bounceInLeft"style="visibility: visible; animation-name: bounceInLeft;"><p class="circle bg-green">no jquery</p></div><divclass="span3 wow flipInX center"style="visibility: visible; animation-name: flipInX;"><imgsrc="https://wowjs.uk/img/wow-2.gif"height="100"style="height: 25vw;"/></div><divclass="span3 wow bounceInRight"style="visibility: visible; animation-name: bounceInRight;"><p class="circle bg-green">many anims</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-5.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow shake"style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">aint GPL</p></div><divdata-wow-iteration="2"class="span3 wow swing center"style="visibility: hidden; animation-iteration-count: 2; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-6.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divclass="span3 wow rollIn"style="visibility: hidden; animation-name: none;"><p class="circle bg-green">how small</p></div><divdata-wow-delay="0.5s"class="span3 wow bounceInUp center"style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-10.gif"height="100"style="height: 25vw;"/></div><divdata-wow-delay="0.5s"data-wow-duration="0.15s"class="span3 wow lightSpeedIn"style="visibility: hidden; animation-duration: 0.15s; animation-delay: 0.5s; animation-name: none;"><p class="circle bg-green">3 KiB only</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-7.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.25s"class="span3 wow pulse"style="visibility: hidden; animation-duration: 0.25s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">just scroll</p></div><divclass="span3 wow lightSpeedIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-9.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow bounce"style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">reveal now</p></div><divclass="span3 wow bounceInUp center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-8.gif"height="100"style="height: 25vw;"/></div><divclass="span3 wow bounceInRight"style="visibility: hidden; animation-name: none;"><p class="circle bg-green">so impress</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-4.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow flip"style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">WOW</p></div><divclass="span3 wow bounceInRight center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-11.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divdata-wow-delay="0.5s"class="span3 wow rollIn"style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><p class="circle bg-green">no jquery?!</p></div><divdata-wow-delay="1s"class="span3 wow bounceInDown center"style="visibility: hidden; animation-delay: 1s; animation-name: none;"><imgsrc="https://wowjs.uk/img/grumpy.gif"height="100"style="height: 25vw;"/></div><divdata-wow-delay="1.5s"class="span3 wow bounceInRight"style="visibility: hidden; animation-delay: 1.5s; animation-name: none;"><p class="circle bg-green">that sucks!</p></div></div></div></div>
</template>
<script>
import { WOW } from "wowjs";
export default {name: "wows",components: {},data() {return {};},onload() {console.log(123);},mounted() {let wow = new WOW({boxClass: "wow", //需要执行动画的元素的 classanimateClass: "animated", //animation.css 动画的 classoffset: 150, //距离可视区域多少开始执行动画mobile: true, //是否在移动设备上执行动画live: true //异步加载的内容是否有效});wow.init();}
};
</script>
<style scoped>
.span3 {flex: 1;display: flex;justify-content: center;
}
.bg-green {background: #5bd5a0;
}
.circle {/* margin: 10px 5px; */width: 25vw;color: #fff;font-size: 15px;line-height: 25vw;text-align: center;height: 25vw;border-radius: 50%;
}
.row {display: flex;justify-content: center;align-items: center;margin: 20vw 0;
}.container111 {margin-left: auto;margin-right: auto;width: 100%;position: relative;padding: 48px 0;overflow: visible;
}
.textClass {/* height: 80vw; *//* background-color: lightblue; */text-align: center;display: flex;justify-content: center;align-items: center;padding-top: 15vw;
}
</style>