在组件中加载初始数据时,如何在react-transition-group中暂停动画？

Question

我有以下App组件:

            <Route render={( { location } ) => (
                <TransitionGroup component="div" className="content">
                    <CSSTransition key={location.key} classNames="slide" timeout={{
                        enter: 1000,
                        exit: 300
                    }} appear>
                        <Switch location={location}>
                            <Route exact path='/' component={Intro}/>
                            <Route path="/history" component={History}/>
                            <Route path="/rules" component={Rules}/>
                            <Route path="/faq" component={Faq}/>
                            <Route path="/feedback" component={Feedback}/>
                            <Route path="/partners" component={Partners}/>
                        </Switch>
                    </CSSTransition>
                </TransitionGroup>
            )}/>

它工作正常,但每个动画立即执行.例如,如果我走的时候/rules到/history,我得到了这两个组件全动画,但历史组件需要从服务器获取数据,因此应用在集装箱空箱的动画.

我怎么能在react-transition-group组件中暂停动画？我有Redux,所以我可以loading在我的应用程序的任何地方更改变量.另外,我不想在app start上预加载商店中的所有数据.

Answer 1

我会让你的组件在加载时返回 null 并使加载状态确定 CSSTransition 键，例如<CSSTransition key={location.key+loading?'-loading':''}

请参阅此处的示例：https ://stackblitz.com/edit/react-anim-route-once

请注意，为了使这项工作不重复，我必须使组件复制加载道具并将其保留在状态中，以便组件的副本之一永远不会显示（这将创建组件的重复，如下所示：https ： //stackblitz.com/edit/react-anim-route-twice）

    <Route render={({ location }) => (
      <TransitionGroup component="div" className="content">
        <CSSTransition key={location.key+(this.state.loading?'-loading':'-loaded')} classNames="crossFade" timeout={{
          enter: 3000,
          exit: 3000
        }} appear>
          <Switch location={location} >
            <Route exact path='/' component={Hello} />
            <Route exact path='/history' render={() =>
              <Delayed setLoading={this.handleSetLoading} loading={this.state.loading} />} />

          </Switch>

        </CSSTransition>
      </TransitionGroup>
    )} />

在组件中是这样的：

export default class History extends React.Component {
  state={loading:this.props.loading}
  componentDidMount() {
    setTimeout(() => {
      this.props.setLoading(false);
    }, 2000);
  }
  render() {
    return !this.state.loading ? <div><h1>History! <Link to="/">Home</Link></h1></div> : null;
  }
}