主页 / 问题 / 1345663
Accepted
Wells
Asked:2022-04-04 17:16:08 +0000 UTC2022-04-04 17:16:08 +0000 UTC

如何动画反应预加载器的消失

  • 772

我在网站上制作人工预加载器时出现问题。我需要它在一段时间后淡出，但我不知道如何让组件在 React 中淡出。我在那里创建了一个类.closed，opacity: 0但没有帮助。代码如下，感谢您的帮助！

const App = () => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 5000);
    });

    const content = loading ? <Preloader/> : <h1>Hello world!</h1>

    return (
        <div className='app'>
            {content}
        </div>
    );
}
javascript

1 个回答

  1. Best Answer

    您可以使用其中一个动画库，例如'react-transition-group'. 以下是类似功能的示例： https ://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed=&file=/index.js:165-189

    • 1

相关问题