网页入场动画之 Animate

本文主要是介绍网页入场动画之 Animate，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

话不多说看效果

提示： gif不动了就刷新下页面！！！！！！！！！！！！！！！！

在这里插入图片描述
仔细看 Animate 就是动态添加一些它自己封装的一些样式类这就是用法
但是类前面必须加 animate__animated

1、安装 animate

npm install animate.css --save

2、main 引入

import animated from 'animate.css' // npm install animate.css --save安装，再引入
Vue.use(animated)

下面就是一些动态添加样式的方法

Animate 还有很多的动画这只是冰山一角具体可以去去官网看
这里我加了鼠标滚动监听，上滚删类下滚添加类

// 这是一个vue的组件  可直接拿走  引入的组件是下一段代码
<template><div class="hello"><h1 :class="css1">帅帅1</h1><h2 :class="css2">帅帅2</h2><h3 :class="css3">帅帅3</h3><h4 :class="css4">帅帅4</h4><Hell2></Hell2></div>
</template><script>
import Hell2 from "./hell2.vue";
export default {name: "HelloWorld",components: {Hell2},data() {return {css1: "",css2: "",css3: "",css4: ""};},created() {this.cssa();this.cssb();this.cssc();this.cssd();},mounted() {window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮 滚动事件},methods: {css() {this.css1 = "";this.css2 = "";this.css3 = "";this.css4 = "";},cssa() {this.css1 = "animate__animated animate__fadeInLeft ";},cssb() {this.css2 = "animate__animated animate__fadeInRight";},cssc() {this.css3 = "animate__animated animate__bounceInDown animate__delay-1s";},cssd() {this.css4 = "animate__animated animate__bounceInUp animate__delay-1s";},handleScroll() {// 监听鼠标滚动// 页面滚动距顶部距离var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;var scroll = scrollTop - this.i;this.i = scrollTop;if (scroll < 0) {// 鼠标上滚this.css();} else {// 鼠标下滚this.cssa();this.cssb();this.cssc();this.cssd();}}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {// height: 1500px;display: flex;flex-wrap: wrap;background-size: c;background: url(../assets/bg.png) no-repeat;h1 {width: 50%;margin-top: 300px;text-align: center;height: 200px;line-height: 200px;background: #333;}h2 {margin-top: 300px;width: 50%;text-align: center;height: 200px;line-height: 200px;background: #444;}h3 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #555;margin: 0;}h4 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #666;margin: 0;}
}
</style>

这里面有组件进入可视区域监听

// 这是上面引入的那个组件  改吧改吧就是你想要的效果
<template><div class="hello"><h5 :class="css5">帅帅5</h5><h6 :class="css6">帅帅6</h6></div>
</template><script>
export default {name: "HelloWorld",data() {return {css5: "",css6: ""};},created() {},mounted() {window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域},methods: {csse() {this.css5 ="animate__animated animate__fadeInTopLeft animate__delay-0.5s animate__slow-5s";// window.removeEventListener('scroll', this.scrollHandle, true); // 记得在适当的时候移除事件监听},cssf() {this.css6 ="animate__animated animate__fadeInRightBig animate__delay-0.5s animate__slow-5s";// window.removeEventListener('scroll', this.scrollHandle, true); // 记得在适当的时候移除事件监听},scrollHandle() {const offset = this.$el.getBoundingClientRect();const offsetTop = offset.top;const offsetBottom = offset.bottom;// const offsetHeight = offset.height;// 进入可视区域// console.log(offsetTop,offsetBottom)if (offsetTop <= window.innerHeight && offsetBottom >= 0) {// console.log('进入可视区域');// do something...this.csse();this.cssf();} else {// console.log('移出可视区域');// this.enabledPause = false;// do something...this.css5 = "";this.css6 = "";}}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {height: 1500px;display: flex;flex-wrap: wrap;width: 100%;margin-top: 500px;overflow: hidden;h5 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #777;margin: 0;}h6 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #888;margin: 0;}
}
</style>