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

Question

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

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

向用户显示加载程序
在后台渲染组件。
等待渲染组件调用onLoad回调
收到 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，使用参考文献。主要变化是将框阴影从组件中移到视图包装器中的容器中。向组件添加引用，将活动引用传递给包装器，然后使用高度转换设置高度。

老实说，如果我有时间的话，我可能会重构很多代码。

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

React component switch animation with a loader - Glitchy

reactjs

react-tsx

react-transition-group

react-animations