0

我有一个要求，我有几个组件，其中只有一个可以在特定时间点显示。组件具有不同的高度。

当用户单击当前显示的组件中的按钮时，我需要

  1. 向用户显示加载器
  2. 在后台渲染组件。
  3. 等到渲染的组件调用 onLoad 回调。
  4. 一旦 onLoad 回调被接收，隐藏加载器。

如下所示（此处的代码沙箱）

const [loading, setLoading] = useState(false);
  const [activeElement, setActiveElement] = useState("Component1");

  const onLoad = () => {
    setLoading(false);
  };

  const onClick = () => {
    setLoading(true);
    setActiveElement(
      activeElement === "Component1" ? "Component2" : "Component1"
    );
  };

  return (
    <div className="container">
      <ViewWrapperHOC loading={loading}>
        {activeElement === "Component1" ? (
          <Component1 onLoad={onLoad} onClick={onClick} />
        ) : (
          <Component2 onLoad={onLoad} onClick={onClick} />
        )}
      </ViewWrapperHOC>
    </div>
  );

我打算编写一个包装器组件（上面示例中的ViewWrapperHOC）来显示组件之间的转换并显示加载器。现在的问题是当我尝试制作动画时，因为我必须在 viewwrapper 中渲染进度条和子项，所以动画似乎非常有问题。

代码沙箱在这里

有人可以提出解决此问题的方法。我对任何替代动画或任何替代方法持开放态度，以任何形式的令人愉快的用户体验来实现这一点。提前致谢。

4

1 回答 1

1

在第二个代码沙箱中，您的问题是，一旦您单击，您就会更改哪个元素处于活动状态，因此它会被渲染。

您可以在 onClick 函数中设置一个小超时：

  const onClick = () => {
    setLoading(true);

    setTimeout(() => {
      setActiveElement(
        activeElement === "Component1" ? "Component2" : "Component1"
      );
    }, 100);
  };

然后在视图包装器中你需要摆脱transition: "200ms all ease-in-out, 50ms transform ease-in-out".

您需要在这里有一个已知的高度才能在高度过渡中进行平滑更改。

见代码和箱叉

版本 2：

这是版本 2，使用 refs。主要变化是将盒子阴影从组件移到视图包装器中的容器。向组件添加引用，将活动引用传递给包装器，然后使用高度过渡设置高度。

老实说，如果我有时间，我可能会大量重构代码。

于 2022-01-25T19:54:17.237 回答