React Router v4 和 React Transition Group v2

Question

我试图找到一个使用 React Router v4 和 React Transition Group v2 的低级动画的工作示例。我查看了 React Router 文档上的示例，但他们只使用 CSS Animation 和一个路由。

这是我目前使用 React Router 的方式：

export const App = () => (
  <div className="app-container">
    <main className="app-container__content">
      <Switch>
        <Route exact path="/projects/:slug" component={ProjectPage} />
        <Route exact path="/" component={StartPage} />
      </Switch>
    </main>
  </div>
);

这是我的 Root.jsx：

const Root = ({ store, history }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/" component={App} />
      </Switch>
    </ConnectedRouter>
  </Provider>
);

我在这里测试了解决方案：https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a - 但它不起作用。有人能指出我正确的方向吗？

更新

我试过这样，但回调没有被调用。所以我最终得到了 dom 中的页面。

export const App = ({ location }) => {
  console.log(location);

  return (
    <div className="app-container">
      <main className="app-container__content">
        <ScrollToTop />
        <TransitionGroup>
          <Switch key={location.pathname} location={location}>
            <Route exact path="/projects/:slug" component={ProjectPage} />
            <Route exact path="/" component={StartPage} />
          </Switch>
        </TransitionGroup>
      </main>
    </div>
  );
};

Answer 1

这里有一篇文章解释了如何使用多个路由设置 react-router v4 和 react-transition-group，并根据下一个状态进行转换：https://medium.com/lalilo/dynamic-transitions-with-react-router-and-react-transition-group-69ab795815c9

Answer 2

您缺少 Transition 组件本身

它应该看起来像这样：

<TransitionGroup>
  <CSSTransition
    key={location.key}
    classNames="page-animation"
    timeout={{ enter: PAGE_ENTER_ANIMATION_SPEED, exit: PAGE_EXIT_ANIMATION_SPEED }}>
    <Switch location={location}>
      <Route exact path="/projects/:slug" component={ProjectPage} />
      <Route exact path="/" component={StartPage} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

请注意，密钥在 CSSTransition 本身上，而不是在 Switch 上

---

更新

如果你想自己实现 这是CSSTransition的基本实现

class MyTransition extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            inTransition: true,
            playAnimation: false,
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({playAnimation: true});
        }, 1);

        this.removeClassesAndFireOnExited();
    }

    removeClassesAndFireOnExited() {
        setTimeout(() => {
            this.setState({playAnimation: false, inTransition: false}, () => {
                if (!this.props.in) {
                    this.props.onExited(this);
                }
            });
        }, this.props.timeout[this.props.in ? 'enter' : 'exit']);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.in !== this.props.in) {
            this.setState({inTransition: true});
            setTimeout(() => {
                this.setState({playAnimation: true});
            }, 1);

            this.removeClassesAndFireOnExited();
        }
    }

    render() {
        const baseClassName = this.props.in ? 'page-animation-enter' : 'page-animation-exit';
        const {inTransition, playAnimation} = this.state;

        const transitionClasses = [...(inTransition ? [baseClassName] : []), ...(playAnimation ? [baseClassName + '-active'] : [])];

        return (
            <div className={transitionClasses.join(' ')}>
                {this.props.children}
            </div>
        );
    }
}

你从TransitionGroup得到this.props.in来表明你是进入还是离开。
this.props.onExited是你从TransitionGroup得到的另一个道具，你必须在退出动画完成时调用它，所以@ 987654332@ 会知道您应该卸载。