---
tags: Vue 直播班 - 2022 冬季班
---
# 第八週：AOS+Vue3 整合
* [Vite 模版](https://github.com/hexschool/vite-template)
## animation
1. [基本範例](https://codepen.io/liao/pen/JjYwNVW?editors=1100)
2. [移動速率](https://codepen.io/liao/pen/gOaZWyj?editors=1100)
3. [完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html)
4. [animation-fill-mode](https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html)
a. forwards：停留在最後一個位置
b. backrawds：回到原本位置
c. both 擁有上面兩個的功能
5. [animate css](https://animate.style/)
6. 本週可以做到的範例：https://goldalles.com/
## transform
1. [文件](https://www.w3schools.com/cssref/css3_pr_transform.asp)
2. [基本範例](https://codepen.io/liao/pen/VwvqWZQ)
## opacity
1. [基本範例](https://codepen.io/liao/pen/jObXwPN)
## aos
1. [aos 官網](https://michalsnik.github.io/aos/)
2. [基本範例](https://codepen.io/liao/pen/PoPXKvm)
```
1.滾輪滾到既定位置上的時候，就會動態載入對應 class 名稱，並呈現它的動態效果
2.在需要效果的 HTML 標籤上，加上 data-aos 屬性，並指定效果名稱xxxx
```
### 載入步驟
在 </body>前加上以下程式碼
```
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
```
AOS 單一設計
```
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center">
</div>
```
AOS 全域設計
```
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
```
* 學員範例：https://codepen.io/liao/pen/BaovZRg
:::spoiler 範例程式碼
```=javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<div class="item" data-aos="fade-right">1</div>
<div class="item" data-aos="fade-right">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-right">4</div>
<div class="item" data-aos="fade-right">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: true, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
// once true ，他動畫只顯示一次，1
// false 上下滾，動畫持續顯示，2
</script>
</body>
</html>
```
:::
## AOS範例
* 文章左右偏移：https://codepen.io/bradtraversy/pen/bGbREWg
* 組合： https://codepen.io/amctagg1/pen/WVjGKw
* 完整範例：https://codepen.io/taohuh/pen/OZmgRV
## 額外補充
* [hover.css](https://ianlunn.github.io/Hover/)
## Vue3+AOS 範例設計
### 步驟一：安裝 NPM AOS
```
npm install aos --save
```
### 步驟二：加入到 app.vue
在 mounted 生命週期鉤子中初始化 AOS 庫，這個程式碼會在 App.vue 元件渲染完成後執行。由於 App.vue 是所有頁面的父元件，因此這個程式碼會對所有頁面產生效果。
```=javascript
<script>
import AOS from 'aos'
import 'aos/dist/aos.css'
export default {
mounted () {
AOS.init()
}
}
</script>
```
### 步驟三：在要用到的地方加入 `data-` 相關語法
```=javascript
<template>
<div>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<h1>AOS Example</h1>
<div class="box" data-aos="fade-up"></div>
<div class="box" data-aos="fade-down"></div>
<div class="box" data-aos="fade-left"></div>
<div class="box" data-aos="fade-right"></div>
<div class="box" data-aos="fade-up"></div>
<div class="box" data-aos="fade-down"></div>
<div class="box" data-aos="fade-left"></div>
<div class="box" data-aos="fade-right"></div>
<div class="box" data-aos="fade-up"></div>
<div class="box" data-aos="fade-down"></div>
<div class="box" data-aos="fade-left"></div>
<div class="box" data-aos="fade-right"></div>
<div class="box" data-aos="fade-up"></div>
<div class="box" data-aos="fade-down"></div>
<div class="box" data-aos="fade-left"></div>
<div class="box" data-aos="fade-right"></div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: red;
}
</style>
```
| 生命週期鉤子 | 觸發時機 | 載入先後順序 | 作用 |
| --- | --- | --- | --- |
| beforeCreate | 在實例創建之後，初始化之前觸發 | 1 | 設置初始狀態、注入依賴和事件，但是無法訪問到 data 和 methods 等屬性 |
| created | 實例創建完成後觸發 | 2 | 訪問和設置 data 和 methods 等屬性，可以使用 $el 來訪問元素 |
| beforeMount | 在元素掛載之前觸發 | 3 | 渲染元素之前可以做的最後修改 |
| mounted | 元素掛載之後觸發 | 4 | 可以訪問到 DOM 元素，可以進行操作，建議進行非同步操作、事件監聽和異步請求等 |
| beforeUpdate | 數據更新之前觸發 | 5 | 在這個鉤子中可以進行數據的最後修改，但不建議進行非同步操作 |
| updated | 數據更新之後觸發 | 6 | 可以訪問到更新後的 DOM 元素，可以進行操作 |
| beforeUnmount | 在元素卸載之前觸發 | 7 | 可以進行最後的清理工作、取消非必要的事件監聽等 |
| unmounted | 元素卸載之後觸發 | 8 | 組件實例被銷毀，可以釋放所有的資源和內存 |
Sign in with Wallet
Connect another wallet