在React应用开发中，组件切换时的转场动画可以显著提升用户交互体验，而紧贴转场效果能让组件切换时无缝衔接，避免出现空白间隙，让页面过渡更加自然。react-transition-transition-group是React官方维护的转场动画库，提供了多个核心组件帮助我们控制组件的进入、离开状态，实现各类转场效果。
react-transition-group核心组件介绍
要实现组件间的紧贴转场，首先需要了解两个核心组件的作用：
- TransitionGroup：用于管理一组转场组件的容器，当它的子组件发生增加、删除时，会自动给对应的子组件添加进入或离开的状态。
- CSSTransition：基于CSS过渡的转场组件，通过给组件添加不同的CSS类名来控制动画的不同阶段，支持配置进入、离开的动画时长等参数。
紧贴转场效果的实现原理
紧贴转场的核心思路是：当旧组件离开时，新组件同时开始进入动画，并且两者的位置、尺寸在动画过程中保持衔接，不会出现布局上的空白。要实现这个效果，我们需要做两件事：
- 让TransitionGroup容器采用相对定位，子组件采用绝对定位，这样新旧组件可以重叠在同一位置，避免布局流的变化产生间隙。
- 配置CSSTransition的动画阶段类名，让旧组件的离开动画和新组件的进入动画同步执行，同时调整两者的位移、透明度等属性实现紧贴衔接。
完整实现步骤与代码示例
1. 安装依赖
首先需要在项目中安装react-transition-group：
npm install react-transition-group --save
2. 编写转场CSS样式
我们需要定义组件进入和离开不同阶段对应的CSS类名，这里实现左右滑动的紧贴转场效果：
/* 转场容器样式 */
.transition-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
/* 单个转场组件的样式 */
.transition-item {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
}
/* 进入动画开始状态 */
.fade-enter {
transform: translateX(100%);
opacity: 0;
}
/* 进入动画执行状态 */
.fade-enter-active {
transform: translateX(0);
opacity: 1;
transition: all 300ms ease-in-out;
}
/* 离开动画开始状态 */
.fade-exit {
transform: translateX(0);
opacity: 1;
}
/* 离开动画执行状态 */
.fade-exit-active {
transform: translateX(-100%);
opacity: 0;
transition: all 300ms ease-in-out;
}
3. 实现转场组件逻辑
下面是完整的React组件代码，通过按钮切换两个组件，实现紧贴转场效果：
import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './transition.css';
const ComponentA = () => {
return (
<div className="transition-item" style={{ backgroundColor: '#409eff' }}>
组件A内容
</div>
);
};
const ComponentB = () => {
return (
<div className="transition-item" style={{ backgroundColor: '#67c23a' }}>
组件B内容
</div>
);
};
const TransitionDemo = () => {
const [showA, setShowA] = useState(true);
const toggleComponent = () => {
setShowA(!showA);
};
return (
<div>
<button onClick={toggleComponent} style={{ marginBottom: '20px', padding: '8px 16px' }}>
切换组件
</button>
<TransitionGroup className="transition-container">
<CSSTransition
key={showA ? 'a' : 'b'}
timeout={300}
classNames="fade"
>
{showA ? <ComponentA /> : <ComponentB />}
</CSSTransition>
</TransitionGroup>
</div>
);
};
export default TransitionDemo;
4. 代码说明
上面的代码中，有几个关键点需要注意：
- TransitionGroup的key属性需要给每个子组件设置唯一的标识，这里通过showA的状态切换生成不同的key，让组件在切换时被识别为新组件进入、旧组件离开。
- CSSTransition的timeout属性需要和CSS中transition的时长保持一致，确保动画状态切换的时机正确。
- classNames设置为fade，对应我们之前编写的fade-enter、fade-enter-active等CSS类名。
- 两个转场组件都采用绝对定位，重叠在TransitionGroup容器内，切换时一个向左滑出，一个从右滑入，实现紧贴的衔接效果。
常见问题与优化建议
在实际使用中可能会遇到一些问题，这里给出对应的解决方法：
- 如果转场时出现闪烁，可以检查CSS中transition的属性和CSSTransition的状态类名是否匹配，确保没有遗漏某个阶段的样式。
- 如果需要实现多个组件的连续转场，可以给TransitionGroup动态添加或删除子组件，CSSTransition会自动处理每个组件的进入离开状态。
- 如果转场效果需要更复杂的动画，可以结合react-transition-group的回调函数，比如onEnter、onExited等，在对应阶段执行自定义的JS动画逻辑。
通过调整CSS的transform属性、transition时长，还可以实现上下滑动、淡入淡出等不同的紧贴转场效果，核心思路都是保持新旧组件的动画同步，避免布局间隙的产生。
react-transition-groupReact组件转场CSSTransitionTransitionGroup修改时间：2026-06-19 00:12:30