如何在react中加载带有过渡的img？

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

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

  componentDidMount() {
    setTimeout(() => {
      this.setState({ showTransition: true });
    }, 500);
  }

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

    return (
      <img
        className={`image-with-transition ${showTransition ? 'show' : ''}`}
        src="your-image-url.jpg"
        alt="Your Image"
      />
    );
  }
}

export default ImageWithTransition;