TransitionGroup 组件在退出活动时滞后

问题描述

我正在为路由器呈现的组件实现一个滑块。使用 TransitionGroup 创建了一个组件以通过 Csstransition 自动附加类，代码可以在 sandbox here 中看到。我添加了 8 个类（2x enter、enter active、exit 和 exit active）以具有左右和左右左行为（“下一步”和“后退”按钮）。

App.css 文件：

.slideIn-enter {
  opacity: 0;
  transform: translateX(-500px);
}

.slideIn-enter-active {
  opacity: 1;
  transition: all 600ms ease-out;
  transform: translateX(0);
}

.slideIn-exit {
  opacity: 1;
}

.slideIn-exit-active {
  opacity: 0;
  transition: all 600ms ease-in;
  transform: translateX(500px);
}

/*  */

.slideOut-enter {
  opacity: 0;
  transform: translateX(500px);
}

.slideOut-enter-active {
  opacity: 1;
  transition: all 600ms ease-in-out;
  transform: translateX(0);
}

.slideOut-exit {
  opacity: 1;
}

.slideOut-exit-active {
  opacity: 0;
  transition: all 600ms ease;
  transform: translateX(-500px);
}

呈现被路由到的组件的滑动组件：

import React from 'react';
import { Csstransition,TransitionGroup } from 'react-transition-group';
import { useLocation } from 'react-router-dom';
import './App.css';

export default function Slide(props) {
  const location = useLocation();

  return (
    <>
      <div className="Box-container">
        <TransitionGroup component={null}>
          <Csstransition
            in={props.visible}
            timeout={1200}
            appear
            classNames={props.isForward ? 'slideIn' : 'slideOut'}
            unmountOnExit
            key={location.key}
          >
            {props.children}
          </Csstransition>
        </TransitionGroup>
      </div>
    </>
  );
}

和 App.js，其中 Slide 组件包装一个 Switch，每次按下下面的 2 个按钮都会呈现 2 个路由之一：

import React,{ useState } from 'react';
import Slide from './Slide';
import { Route,Switch } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import './App.css';

export default function App() {
  const [isForward,setIsForward] = useState(true);
  const history = useHistory();

  const BoxRed = () => {
    return <div className="Box1">Box1</div>;
  };

  const BoxGreen = () => {
    return <div className="Box2">Box2</div>;
  };

  const pushNewRoute = () => {
    if (history.location.pathname.endsWith('red')) {
      history.push('/green');
    } else {
      history.push('/red');
    }
  };

  return (
    <>
      <Route
        render={({ location }) => (
          <Slide isForward={isForward}>
            <Switch location={location}>
              <Route path="/green" component={BoxRed} />
              <Route path="/red" component={BoxGreen} />
            </Switch>
          </Slide>
        )}
      ></Route>
      <div>
        <button
          className="btn-container"
          onClick={() => {
            setIsForward(true);
            pushNewRoute();
          }}
        >
          Next
        </button>
        <button
          className="btn-container"
          onClick={() => {
            setIsForward(false);
            pushNewRoute();
          }}
        >
          Back
        </button>
      </div>
    </>
  );
}

在我的 index.js 中，我将 App.js 包装在 browserRouter 中：

import React from 'react';
import ReactDOM from 'react-dom';
import { browserRouter,Route } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <browserRouter>
    <Route path="/" component={App} />
  </browserRouter>,document.getElementById('root')
);

reportWebVitals();

在代码框中可以看到的主要问题是，当退出组件处于退出活动状态（我们称之为状态）并且进入组件处于进入活动状态时，组件停止。

当输入组件设置为 enter-done 时，似乎它在 CSS 定义的方向上被翻译了一半的宽度，我不知道为什么。我认为 TransitionGroup 上的超时是导致它的原因，但是无论我输入的 CSS 类中的转换时间大于什么值，它都会延迟效果并且无法弄清楚原因。

切换类集也有一个较小的问题，在“下一步”然后“返回”时可以观察到，但是除非问题很明显，否则可以随意忽略它（可能在附加新的时没有删除 CSS 类的，但还没有时间解决它）。提前致谢！

解决方法

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

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

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

css-transitions react-transition-group reactcsstransitiongroup reactjs reactjs