如何使用css和react创建浮动图像过渡

npm install react react-dom
npm install react-transition-group

import React from 'react';
import { CSSTransition } from 'react-transition-group';

class FloatingImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showImage: false
    };
  }

  componentDidMount() {
    // 在组件加载后，设置一个延迟，然后显示图像
    setTimeout(() => {
      this.setState({ showImage: true });
    }, 1000);
  }

  render() {
    return (
      <CSSTransition
        in={this.state.showImage}
        timeout={1000}
        classNames="float-image"
        unmountOnExit
      >
        <img src={this.props.imageSrc} alt="Floating Image" />
      </CSSTransition>
    );
  }
}

export default FloatingImage;

.float-image-enter {
  opacity: 0;
  transform: translateY(100px);
}

.float-image-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1000ms, transform 1000ms;
}

.float-image-exit {
  opacity: 1;
  transform: translateY(0);
}

.float-image-exit-active {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 1000ms, transform 1000ms;
}

import React from 'react';
import FloatingImage from './FloatingImage';
import './styles.css';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>浮动图像过渡</h1>
        <FloatingImage imageSrc="image.jpg" />
      </div>
    );
  }
}

export default App;

npm start