Javascript 加载gif，然后转换到reactjs上的网页

我有一个react js应用程序，当加载一个页面时，在开始加载一个gif。我想要一种方法，使整个网站是完全加载，然后gif将停止，并将作出过渡，以显示一个准备好的网站，这种过渡可以淡出或增长周期，目前的gif是硬编码超时有办法做到这一点吗

目前，这是负责加载gif的代码：

loader.js文件：

import loder from "../assets/gifs/loading.gif"
const Loader = () => {
    return (
        <div
        style={{
          background: "#F7D036",
          height:'100%',
          width:"100%"

        }}
      >
          
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>  
        <center>
        <img src={loder} height="200" alt=""/></center>
         </div>
    )
}

  useEffect(() => {
  
    getAllCategories();
    setTimeout(() => setLoading(false), 2000);
  }, [getAllCategories]);

 return (
    <Router>
      {loading == true ? (
        <Loader />
      ) : (

some code ) 

从“./assets/gifs/loading.gif”导入房客
常量加载器=（）=>{
返回(













)
}

app.js文件：

import loder from "../assets/gifs/loading.gif"
const Loader = () => {
    return (
        <div
        style={{
          background: "#F7D036",
          height:'100%',
          width:"100%"

        }}
      >
          
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>  
        <center>
        <img src={loder} height="200" alt=""/></center>
         </div>
    )
}

  useEffect(() => {
  
    getAllCategories();
    setTimeout(() => setLoading(false), 2000);
  }, [getAllCategories]);

 return (
    <Router>
      {loading == true ? (
        <Loader />
      ) : (

some code ) 

useffect（（）=>{
getAllCategories（）；
setTimeout（（）=>setLoading（false），2000）；
}，[getAllCategories]）；
返回(
{loading==true(
) : (
（一些代码）

我们可以使用window.onload（）事件监听器的方法，在您的情况下，执行会是这样的，而且您还需要使用状态来有效地管理它们

window.onload=（e）=>{
//你的状态在这里改变
设置加载（假）；
}

window.onload监听器将等待整个页面加载，您必须首先启动加载程序，然后使用useffect切换此函数，如

useffect（（）=>{
// 
设置加载（真）；
//将window.onload事件包装到函数中，并在此处调用它
windowLoadFunction（）；
}, [])

你好，麦克斯，根据评论， 我们可以做的是启动你的加载程序，就像你必须在默认情况下将加载程序的状态设置为true一样，这样你的页面开始加载， 因此，您可以使用useState属性通过deault将其设置为true，并向加载程序添加css类，还可以添加id，这样我们就可以使用document.getElementById（）获取它，正如答案中所述，当我们将加载程序状态切换为false时，我们可以通过像document.getElementById（“加载程序”）一样访问它来更改加载程序的类。className=“你的动画css淡出类”，就是这样，如果你想让你的加载器先淡出，那么先调用类更改方法，然后你可以将setLoader类调用为false

const[loading，setLoader]=useState（true）；
useffect（（）=>{
window.onload=（）=>{
//使用css将gif的类更改为淡出
//更改此setTimeout函数中的时间，使其在动画结束时立即触发，与动画持续时间匹配，并在动画结束前20毫秒左右启动，
document.getElementById（“加载程序”）.className=“淡出加载程序”；
设置超时（（）=>{
//这将确保加载程序不再显示，您的主要内容将弹出
setLoader（错误）
}, 60) 
//匹配加载器输出转换的时间，使转换平稳
}
},[])
{！正在加载}？
主要内容：
装载机元件

你的css类应该看起来像（App.css）

.loader类{
显示：可见；
}
.淡出加载器{
//将淡入淡出动画添加到这个类中，你可以在Animista获得它们
}

谢谢您的回答，但我不知道这如何帮助我从GIF过渡到网页，例如循环过渡或淡入淡出……您能详细说明一下吗？