最近研究起了前端技术，简直五花八门。随手记录：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动画名称。