毕设踩坑系列之——react-transition-group

记录有关react-transition-group的坑

更新

---

[2019-7-21]

• Initial release

[2019-8-13]

Added

• 新增问题长列表 + 切换路由时卡顿

记录

---

1. 阻止某个页面的路由过渡

解决办法:

展开代码

<CSSTransition
  key={
    /(\/user\/.+) | (\/home\/\w+)/.test(props.location.pathname)
      ? ''
      : props.location.pathname
  }
>...</CSSTransition>

2. 长列表 + 切换路由时卡顿

解决办法:

将CSSTransition的exit配置项设置为false, 取消掉出场动画, 可减缓卡顿.

展开代码

<CSSTransition
  key={v._id}
  timeout={300}
  // 将该项设置为false
  exit={false}
  classNames={'fadeTranslateZ'}
>
  <ContentMainItem>
    <BaseChatMessage
      isSend={isSend}
      chatMessageInfo={chatMessageInfo}
    />
  </ContentMainItem>
</CSSTransition>