React集成animate.css入場動畫 代碼 使用

最近研究起了前端技術，簡直五花八門。隨手記錄：animate.css動畫。
這個是自己研究着寫的，好像只能支持入場動畫，如何支持出場動畫還得深入研究，我想應該差不多的思路，應該要用到getDerivedStateFromProps這個生命函數。

代碼

import React from "react";

function Animation(props) {
    const { animation } = props;
    return (
        <div className={`animate__animated animate__${animation}`}>
            {props.children}
        </div>
    );
}

function withAnimation(WrappedComponent, animation) {
    return React.forwardRef((props, ref) => {
        return (
            <Animation animation={animation ? animation : "fadeIn"}>
                <WrappedComponent ref={ref} {...props} />
            </Animation>
        );
    });
}
export { Animation, withAnimation };

使用

使用Animation包裹需要動畫的組件，animation屬性傳遞動畫名稱；或者使用withAnimation高階組件，第二個參數爲animation動畫名稱。