如何在 Vue 使用 AOS 動畫

今天來分享一下如何在 Vue 使用 AOS 動畫，這是一款蠻好上手的滾動式動畫插件，官方也提供很多種設定，讓我們可以自訂義想呈現的動畫效果，整體操作起來簡單易懂。

AOS 官方連結： https://michalsnik.github.io/aos/

下載套件

首先先在專案下安裝此插件

指令碼

1	npm i aos@next

注入 main.js 中

把 AOS import 進 main.js 裡面

內容

import AOS from "aos";
import "aos/dist/aos.css";

new Vue({
  created() {
    AOS.init({ });
    },
    router,
    render: h => h(App)
    }).$mount("#app");

這邊要注意的是，需要在 new Vue 裡面創建一個 created(){} 把官方的 AOS.init({}); 寫入其中。

運行動畫效果

接下來就可以在專案中帶入動畫效果了

1	<div data-aos="fade-up"></div>

是不是很簡單 XD

客製化

細部設定
官方提供蠻多的客製化內容，如 data-aos-duration:400 動畫速率、 data-aos-once="true" 動畫進行一次等設定，連結
1
<div data-aos="fade-up" data-aos-duration="1000" data-aos-once="false" ... ></div>
全域設定
除了個別設定外，當然也有寫在 AOS.init({}); 裡的全域設定，連結
1
2
3
4
5
AOS.init({
disable: false,
startEvent: 'DOMContentLoaded',
...
});

參考網址：https://www.yasminzy.com/vue/aos.html#steps

下載套件

注入 main.js 中

運行動畫效果

客製化

細部設定

全域設定