问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么添加过渡页面，想不明白？

头像
hstnba
    20554165

    就是进入首页的时候，会有一个过渡动画，等页面加载完成之前有个过渡效果，这个怎么写，我写了个组件如下：

    import React from 'react';
import {Spin} from 'antd';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </div>,
  document.getElementById('react-loading')
);

    然后我在index.html页面上这家添加：

    <body>
<div id="react-content">
  <div id="react-loading"><script src="./entry/loading.jsx"></script></div>
</div>

</body>

    还有这样添加：

    <div id="react-content">
  <div id="react-loading"></div>
</div>```
但是这样不行，只有在第一个<DIV>里写文字才有效果，哪位会的说下啊非常谢谢谢谢！！
    javascriptpythonreactantdreact-router
    阅读 3k
    2 个回答
    得票最新
    头像
    北落
      159136

      这个其实很简单，可能你想复杂了。
      直接在index.html页面里边写一个css的动画就可以了。
      这个主要是防止加载reactjs打包后的文件，等待时间过长的问题。如果你在用reactjs就起不到一个很好的效果了，结果就是白屏，等待加载，加载完，很短的间隔（毫秒），跳转首页

      头像
      乔治
        13.1k1329

        loading.jsx文件：

        import React from 'react';
import { Spin } from 'antd';

const Loading = () => (
  <div>
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </div>
);

export default Loading;

        入口文件（index.js或app.js）里导入这个组件。。

        import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Loading from './loading';

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

  useEffect(() => {
    // 模拟页面加载
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      {loading ? <Loading /> : <div>页面内容</div>}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('react-content'));

        最后，index.html文件：

        <body>
  <div id="react-content"></div>
</body>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题