SwitchTransition 的 React-transition-group 动态退出动画

问题描述

我正在尝试制作具有动态退出动画的应用。 SwitchTransition 的退出动画在组件渲染时设置，以后无法更改。可以使用 childFactory 和 TransitionGroup like here 来实现，但通过这种方式动画同时发生。我需要让反应等到以前的卸载 - 就像在 SwitchTransition 中一样。所以问题是：是否有可能为 SwitchTransition 使用 childFactory 之类的东西，或者让 TransitionGroup 的行为方式与 SwitchTransition 模式“out-in”相同。提前致谢！

export default function App() {
  const [state,setState] = React.useState(true);
  const [direction,setDirection] = React.useState("left");
  return (
      <div className="main">
        <SwitchTransition mode="out-in">
          <Csstransition
            key={state}
            addEndListener={(node,done) => {
              node.addEventListener("transitionend",done,false);
            }}
            classNames={direction === "left" ? "fade--left" : "fade--right"}
          >
            <div className="button-container">
              <Button
                onClick={() => {
                  setState((state) => !state);
                  const dir = Math.random() > 0.5 ? "right" : "left";
                  setDirection(dir);
                }}
              >
                {direction}
              </Button>
            </div>
          </Csstransition>
        </SwitchTransition>
      </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）