# react aos動畫使用
###### tags:`react`
[官網](https://michalsnik.github.io/aos/)

[codepen](https://codepen.io/michalsnik/pen/EyxoNm)

[class元件](https://www.cxyzjd.com/article/yujin0213/84532506)

// 动效aos
import AOS from 'aos';
import 'aos/dist/aos.css';

class App extends React.Component {
    
    constructor() {
    
        super();
    }

componentDidMount(){
    
        AOS.init({
    
            duration : 1000,
            easing: 'ease-out-back',  
            delay: 600
        })
    }

    render() {
    
        return (
            <div data-aos="fade-up" > 
              Hello world
           </div>
        );
    }
}

[函式型元件](https://stackoverflow.com/questions/59507952/if-i-want-to-use-a-javascript-library-like-aos-in-react-how)

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

function App() {
  useEffect(() => {
    AOS.init();
    AOS.refresh();
  }, []);

  return (
    // your components
  );
}

export default App;

[教學](https://ithelp.ithome.com.tw/articles/10210148)

data-aos="flip-left"
data-aos-easing="ease-out-cubic"//跟著螢幕不用綁id
data-aos-duration="1000"

data-aos = 呈現的效果 //fade、flip、zoom任君挑選
data-aos-duration = 出場持續時間 //單位是毫秒，所以1000代表1秒
data-aos-delay = 遲延秒數
data-aos-offset = 卷軸滾到多少px才觸發
data-aos-easing = 動畫執行速度 //個人試過覺得效果不大
data-aos-once = 觸發一次或上下滾動都觸發 //用true或false
data-aos-anchor-placement = 滾動到哪才觸發 //這邊可用top-