CSSTransitionGroup失效求助：实现page-wrapper点击导航淡入效果

嘿，我看到你在给页面切换加淡入效果时遇到了CSSTransitionGroup的问题，别着急，咱们一步步来排查和解决～

常见失效原因排查 #

先给你列几个CSSTransitionGroup最容易踩的坑，你可以先对照自己的代码检查：

• 未关联路由变化：CSSTransitionGroup需要感知路由切换，必须包裹住路由的<Switch>或<Route>组件，而不是只套在内部的page-wrapper上。
• 缺少唯一Key：它依赖唯一key识别组件变化，通常用当前路由的pathname作为key值。
• 过渡CSS未正确定义：CSSTransitionGroup会自动添加/移除过渡类，你得为这些类写对应的动画样式。
• 版本兼容问题：如果用的是react-transition-group v2+，旧的CSSTransitionGroup已经被TransitionGroup+CSSTransition组合替代，版本不对也会失效。

调整后的代码示例 #

先确保安装了正确的依赖：

npm install react-transition-group --save

然后修改你的主组件代码：

import React from 'react';
import { withRouter, Switch, Route } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

class LoadingProvider extends React.Component {
  render() {
    const { location } = this.props;

    return (
      <TransitionGroup>
        {/* 用路由pathname作为唯一key，确保切换时触发过渡 */}
        <CSSTransition
          key={location.pathname}
          timeout={500}
          classNames="page-fade"
          unmountOnExit
        >
          <Switch location={location}>
            {/* 这里放置你的各个路由组件，每个组件的根元素记得加上page-wrapper类 */}
            <Route path="/module1" component={Module1} />
            <Route path="/module2" component={Module2} />
            {/* 其他路由配置... */}
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

export default withRouter(LoadingProvider);

最后添加对应的CSS样式（类名要和classNames="page-fade"对应）：

/* 淡入过渡的核心样式 */
.page-fade-enter {
  opacity: 0;
}

.page-fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.page-fade-exit {
  opacity: 1;
}

.page-fade-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

/* 保留你原有的page-wrapper样式 */
.page-wrapper {
  /* 你的原有样式代码 */
}

额外提示 #

• 每个页面组件的根元素一定要是page-wrapper，这样过渡效果会直接作用在它上面。
• timeout的值要和CSS里的transition时长保持一致，否则过渡会异常。
• unmountOnExit会在页面退出后卸载组件，避免DOM残留旧内容。

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