Question

我用CSSTransitionGroup做反应堆的模拟，但是没有效果，没有错误，关键是设置，css导入成功，但没有效果。

  render() {
    var kk = new Date().getTime();
    return (
      <BrowserRouter>
        <div>
          <div className="leftNav" style={styles.leftNav}>
            {leftNav()}
          </div>
          <div className="content" style={styles.content}>
            <CSSTransitionGroup
              transitionName="a"
              transitionAppear={true}
              transitionAppearTimeout={500}
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}>
              <div key={location.pathname}>
                <Route exact path="/" component={Com1}/>
                <Route exact path="/com1" component={Com1}/>
                <Route exact path="/com2" component={Com2}/>
                <Route exact path="/todo" component={TodoList}/>
                <Route exact path="/com3" component={Com3}/>
              </div>
            </CSSTransitionGroup>
          </div>
        </div>
      </BrowserRouter>
    );
  }

请给我一些提示。

Answer 1

来自Animated Add-Ons文档。

注意：您必须为ReactCSSTransitionGroup的所有子项 提供 键属性，即使只渲染单个项目也是如此。这就是React将如何确定哪些孩子已进入，离开或留下。

在您的示例中，您有一个< CSSTransitionGroup />组件的子项。它永远不会改变，离开或进入DOM ......但它的孩子会这样做。

删除<div />并使用< CSSTransitionGroup />包裹路线处理程序。确保为每个<Route />提供一个唯一的密钥！

以下是一个工作示例项目react-router-transition。

这是一个找到解决方案的github issue。

以下是引用解决方案的粘贴，信用@resting

<Router> ... <nav> <NavLink to="/" exact activeClassName="active"> <span>Production</span> </NavLink> <NavLink to="/personal" activeClassName="active"> <span>Personal</span> </NavLink> </nav> ... <Route render={({ location }) => ( <CSSTransitionGroup transitionName="slide-left" transitionEnterTimeout={300} transitionLeaveTimeout={500} > <Switch key={location.key} location={location}> <Route exact path="/" component={Production}/> <Route path="/personal" component={Personal}/> </Switch> </CSSTransitionGroup> )} /> </Router>

使用CSSTransitionGroup遇到问题

1 个答案: