如何用React Starter Kit与React Transition Group实现页面淡入淡出切换？

我来帮你搞定这个页面过渡的问题～看你已经有了初步的代码框架，接下来咱们一步步完善它，实现流畅的页面进出淡入淡出效果：

首先，先把你没写完的组件代码补全，同时结合React Router的路由监听来触发动画：

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { withRouter } from 'react-router-dom'; // 引入withRouter获取路由信息
import s from './About.less';

class About extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMounted: false, // 控制初始渲染的进入动画
      currentPath: props.location.pathname // 记录当前路由，用于触发过渡
    };
  }

  componentDidMount() {
    // 组件挂载后触发进入动画
    this.setState({ isMounted: true });
    // 监听路由变化，更新当前路径
    this.unlisten = this.props.history.listen((location) => {
      this.setState({ currentPath: location.pathname });
    });
  }

  componentWillUnmount() {
    // 组件卸载前移除路由监听，防止内存泄漏
    this.unlisten();
  }

  render() {
    // 只有当isMounted为true时才渲染页面内容，确保初始进入动画生效
    const pageContent = this.state.isMounted ? (
      <div key={this.state.currentPath} className={s.root}>
        <h1>About Page</h1>
        {/* 这里放你的页面具体内容 */}
      </div>
    ) : null;

    return (
      <ReactCSSTransitionGroup
        transitionName="fade"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
      >
        {pageContent}
      </ReactCSSTransitionGroup>
    );
  }
}

// 用withRouter包裹组件，让它能访问路由相关的props
export default withRouter(withStyles(s)(About));

然后在你的About.less文件里添加过渡对应的CSS样式：

// 淡入动画样式
.fade-enter {
  opacity: 0;
}

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

// 淡出动画样式
.fade-leave {
  opacity: 1;
}

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

// 页面根容器样式
.root {
  padding: 2rem;
  // 其他页面样式
}

进阶优化：全局路由层面统一处理过渡 #

如果想让所有页面都自动拥有这个淡入淡出效果，不用每个页面都写一遍逻辑，建议把ReactCSSTransitionGroup移到全局的路由根组件（比如App.js）里：

// App.js示例代码
import React from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import About from './pages/About';
import Home from './pages/Home';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentPath: props.location.pathname };
  }

  componentDidMount() {
    // 监听全局路由变化
    this.unlisten = this.props.history.listen((location) => {
      this.setState({ currentPath: location.pathname });
    });
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    return (
      <ReactCSSTransitionGroup
        transitionName="fade"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
      >
        {/* 给Switch加key，路由变化时触发过渡 */}
        <Switch key={this.state.currentPath} location={this.props.location}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          {/* 其他路由 */}
        </Switch>
      </ReactCSSTransitionGroup>
    );
  }
}

export default withRouter(App);

几个关键注意点 #

• 一定要给过渡元素加key属性，而且key要和路由路径绑定，这样React才能识别页面切换，触发离开和进入动画。
• 初始渲染时用isMounted状态控制，避免页面直接显示而没有进入动画。
• 用withRouter高阶组件包裹组件，才能获取到history和location这些路由相关的对象，实现路由监听。

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