使用加载器反应组件切换动画 - Glitchy

Question

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

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

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

类似下面的东西（代码沙箱here）

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 中同时渲染进度条和子项，因此动画似乎非常有问题。

代码沙箱here

有人可以提出解决此问题的方法吗？我愿意接受任何替代动画或任何替代方法以任何形式的令人愉快的用户体验来实现这一点。提前致谢。

Answer 1

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

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

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

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

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

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

See codesandbox fork

版本 2：

Here is version 2，使用参考文献。主要变化是将盒子阴影从组件移到视图包装器中的容器中。向组件添加 refs，将活动 ref 传递给包装器，然后使用高度转换设置高度。

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