## 页面中，当滚动条滚动到对应的元素位置，显示对应的动画（使用了animation.css动画库）
1.安装animation.css
`npm install animate.css
`
2.在main.js中引入使用
```
import animate from "animate.css";
Vue.use(animate);
```
3.在vue中使用
```
//animate__animated 必须要使用
<template>
<div>
<div class="box">
<div
class="c_1 animate__animated"
:class="{ animate__fadeInLeft: testShow }" //通过testShow 控制动画
></div>
<div
class="c_2 animate__animated"
:class="{ animate__fadeInRight: testShow }"
></div>
</div>
<div class="box">
<div
class="c_3 animate__animated"
:class="{ animate__fadeInUpBig: testShow1 }"
></div>
<div
class="c_4 animate__animated"
:class="{ animate__fadeInDownBig: testShow1 }"
></div>
</div>
<div class="box">
<div
class="c_5 animate__animated"
:class="{ animate__rotateInDownLeft: testShow2 }"
></div>
<div
class="c_6 animate__animated"
:class="{ animate__rotateInUpLeft: testShow2 }"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentScroll: 0,
testShow: false,
testShow2: false,
testShow1: false,
};
},
mounted() {
window.addEventListener("scroll", this.handleScrollbox, true);//监听滚动条
},
methods: {
handleScrollbox(e) {
this.currentScroll = e.target.scrollTop;
console.log(this.currentScroll);
if (this.currentScroll >= 820) {
this.testShow2 = true;
}
if (this.currentScroll >= 220) {
this.testShow1 = true;
}
if (this.currentScroll >= 10) {
this.testShow = true;
}
},
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScrollbox, true);
},
};
</script>
<style>
.box {
width: 100%;
height: 600px;
background: #ccc;
display: flex;
justify-content: center;
margin: 10px 0;
align-items: center;
}
.c_1,
.c_3,
.c_5 {
width: 400px;
height: 200px;
background: red;
}
.c_2,
.c_4,
.c_6 {
width: 400px;
height: 200px;
background: rgb(16, 217, 110);
}
</style>
```
