## 頁面中，當滾動條滾動到對應的元素位置，顯示對應的動畫（使用了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>
```
