如何在 React 中正确设置加载栏动画？

Question

我正在 React 中构建一个加载栏，但有些东西不对劲。我希望它在计时器达到 3 秒后填充宽度

100%

，但由于某种原因它无法按预期工作。

const { useState, useEffect } = React;

const Loading = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const duration = 3000;
    const increment = 100 / duration;

    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        const newProgress = prevProgress + increment;
        if (newProgress >= 100) {
          clearInterval(timer);
          setIsLoading(false);
          return 100;
        }
        return newProgress;
      });
    }, 10);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="canvas">
      {isLoading && (
        <div
          className="loadng_bar"
          style={{ width: `${progress}%` }}
        ></div>
      )}
    </div>
  );
};

// Render it
ReactDOM.createRoot(
  document.getElementById("root")
).render(
  <Loading />
);

.loadng_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background-color: #c4483f;
  transition: width 3.05s linear;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

它应该在 3 秒内将

progress

增加到全宽。我怎样才能实现它？

Answer 1

看起来加载栏的问题源于您如何计算

increment

值和

setInterval

的时间。我们的目标是在 3 秒内填满加载栏，但您当前的做法可能与预期不符。

这是代码的修订版本，应该可以按预期工作：

const { useState, useEffect } = React;

const Loading = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const duration = 3000; // Duration in milliseconds
    const increment = 100 / (duration / 10); // Calculate increment based on interval time

    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        const newProgress = prevProgress + increment;
        if (newProgress >= 100) {
          clearInterval(timer);
          setIsLoading(false);
          return 100;
        }
        return newProgress;
      });
    }, 10); // Update every 10 milliseconds

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="canvas">
      {isLoading && (
        <div
          className="loading_bar"
          style={{ width: `${progress}%` }}
        ></div>
      )}
    </div>
  );
};

// Render it
ReactDOM.createRoot(
  document.getElementById("root")
).render(
  <Loading />
);

CSS

确保您的 CSS 定义也正确：

.loading_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background-color: #c4483f;
}

主要变更说明

1. 增量计算：

   increment

   现在根据间隔在总持续时间内运行的次数来计算。由于您每 10 毫秒更新一次，因此您可以将总持续时间除以间隔时间以获得正确的增量数。

2. CSS 类名称：确保您的 CSS 类名称与您在 React 组件中使用的名称相匹配（

   loading_bar

   而不是

   loadng_bar

   ）。

通过这些调整，您的加载栏现在应该在 3 秒内填充到 100%。