React Transition Group切换第2-3页时内容跳动问题求助

问题根源 #

你已经给页面添加了绝对定位，但仍出现内容跳动，核心原因是包裹页面的父容器未设置固定高度。切换页面时，旧页面退出动画尚未完成，父容器会优先适配新页面的高度，导致布局瞬间偏移。另外，CSSTransition的超时时间与CSS动画时长不匹配，也会放大这个问题。

具体修复步骤 #

• 给页面容器（.pages）设置固定高度，比如占满视口，确保切换过程中容器高度稳定：

.pages {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

• 对齐CSSTransition的timeout值与CSS动画时长，比如你的动画是300ms，timeout就设为300：

<CSSTransition
  key={currentPage}
  timeout={300}
  classNames="page"
  unmountOnExit
>

• 补全页面的绝对定位属性，避免布局偏移：

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

优化建议 #

• 给动画元素加上will-change: transform，让浏览器提前优化动画性能：

.page-enter, .page-exit-active {
  will-change: transform;
}

内容的提问来源于stack exchange，提问作者Dmytro