Question

从呈现Products的状态开始。

我希望上面的Products退出动画，并且当单击ProductDetailPhotos视图中存在的NavLink to={'/product-detail/' + variant.id}时出现Products，但是，首先是上面的Products替换为新的ProductDetailPhotos，并在其后出现另一个新的ProductDetailPhotos。

<TransitionGroup component="main" className="page-main">
  <CSSTransition key={location.pathname} timeout={timeout} classNames="fade" appear>
    <Switch location={location}>
      <Route exact path={'/'} component={ () =>
        <Products
          productsArray={this.state.myProductsArray}
          client={this.props.client}
        />
      }/>
      <Route path='/product-detail/:variantId' render={props =>
        <ProductDetailPhotos
          products={this.state.products}
          client={this.props.client}
          addVariantToCart={this.addVariantToCart}
          {...props}
        />
      }/>
      <Route component={NotFoundPage} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

我按时间序列说明了实际情况，如下所示：

Products DOM已呈现
点击NavLink到/ product-detail
Products DOM立即更改为带有淡入淡出类的ProductDetailPhotos 1 DOM，然后呈现带有淡入淡出类的ProductDetailPhotos 2 DOM
ProductDetailPhotos 1 DOM和ProductDetailPhotos 2 DOM通过CSS开始动画。 ProductDetailPhotos 1 DOM设置动画以退出，而ProductDetailPhotos 2 DOM进入。
ProductDetailPhotos 1 DOM终于消失了

我的期望如下：

Products DOM已呈现
点击NavLink到/ product-detail
ProductDetailPhotos DOM首先使用出现褪色的类
然后Products DOM会通过淡出类和ProductDetailPhotos DOM进行动画退出，从而退出CSS。

谢谢。

Answer 1

我自己解决了。改变这个：

<Switch location={location}>

对此：

<Switch key={location.pathname} location={this.props.location}>

使用Route对CSSTransition进行反应首先渲染下一页，然后再次渲染下一页

1 个答案: