如何在react子组件中保留CSS过渡

.transition {
  transition: all 0.3s ease;
}

import React, { Component } from 'react';
import './ChildComponent.css';

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showTransition: false
    };
  }

  componentDidMount() {
    // 在组件挂载后，延迟一段时间后添加过渡效果的类名
    setTimeout(() => {
      this.setState({ showTransition: true });
    }, 100);
  }

  componentWillUnmount() {
    // 在组件卸载前，移除过渡效果的类名
    this.setState({ showTransition: false });
  }

  render() {
    const { showTransition } = this.state;

    return (
      <div className={`child-component ${showTransition ? 'transition' : ''}`}>
        {/* 子组件内容 */}
      </div>
    );
  }
}

export default ChildComponent;

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      {/* 其他父组件内容 */}
      <ChildComponent />
    </div>
  );
}

export default ParentComponent;