如何使用React Transition Group v2实现组件卸载时的基础过渡效果？

这里给你整理好完整且可复用的Fade过渡组件，基于react-transition-group实现，代码简洁且易于集成：

import React from 'react';
import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';

const duration = 250;
const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out, color ${duration}ms ease-in-out`,
  opacity: 0,
}
const transitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
  exiting: { opacity: 1 },
  exited: { opacity: 0 },
};

export default class Fade extends React.Component {
  static propTypes = {
    in: PropTypes.bool.isRequired,
    children: PropTypes.node.isRequired,
    timeout: PropTypes.number,
    style: PropTypes.object,
  };

  static defaultProps = {
    timeout: duration,
    style: {},
  };

  render() {
    const { in: inProp, timeout, children, style, ...rest } = this.props;
    const combinedStyle = { ...defaultStyle, ...style };

    return (
      <Transition in={inProp} timeout={timeout} {...rest}>
        {(state) => (
          React.cloneElement(children, {
            style: {
              ...combinedStyle,
              ...transitionStyles[state],
              ...children.props.style,
            },
          })
        )}
      </Transition>
    );
  }
}

组件说明与使用方式 #

• 核心依赖：需要先安装对应依赖（如果项目未安装）

  npm install react-transition-group prop-types
  # 或使用yarn
  yarn add react-transition-group prop-types
  

• 基础用法示例：

  import Fade from './Fade';
  
  function App() {
    const [showElement, setShowElement] = React.useState(false);
  
    return (
      <div>
        <button onClick={() => setShowElement(!showElement)}>
          切换元素显示状态
        </button>
        <Fade in={showElement}>
          <div className="content">我会平滑淡入淡出哦！</div>
        </Fade>
      </div>
    );
  }
  

• 自定义配置选项：
  • 通过timeout属性自定义过渡时长，覆盖默认的250ms
  • 用style属性添加额外基础样式，会与组件内置过渡样式自动合并
  • 支持react-transition-group的Transition组件所有原生属性，比如mountOnEnter、unmountOnExit等

这个组件通过控制元素的opacity属性实现平滑过渡，同时保留了足够的扩展性，能适配不同场景的样式需求。

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