ReactCSSTransitionGroup在路线更改时保留动画

问题描述

我正在使用ReactCsstransitionGroup进行组件的安装/卸载动画。我的组件在特定的路径上渲染，渲染动画按预期方式工作，但是当我返回浏览器历史记录时，卸载动画失败。

jsx

<ReactCsstransitionGroup
  transitionName="slide"
  transitionAppear={true}
  transitionAppearTimeout={300}
  transitionLeaveTimeout={500}
  transitionEnter={false}
  transitionLeave={true}
  >
    <div className={styles.itemdisplay} />  
</ReactCsstransitionGroup>

通过路线呈现的

<Route exact path="/item" component={ItemDetails}/>

css动画

.slide-appear {
    transform: translateX(0);
}

.slide-appear.slide-appear-active {
    transform: translateX(-100%);
    transition: all 0.3s;
}

.slide-leave {
    transform: translateX(-400%);
}

.slide-leave.slide-leave-active {
    transform: translateX(0);
    transition: all 0.3s;
}

我知道更改路线后会完全卸载Item组件，但是我认为应该在它之前应用leave动画。

解决方法

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

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

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