向react web应用程序添加动画gif

npm install react-transition-group

import React from 'react';
import { CSSTransition } from 'react-transition-group';
import './animation.css'; // 引入动画样式

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

  toggleAnimation = () => {
    this.setState(prevState => ({
      showAnimation: !prevState.showAnimation
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleAnimation}>Toggle Animation</button>
        <CSSTransition
          in={this.state.showAnimation}
          timeout={300}
          classNames="fade"
          unmountOnExit
        >
          <img src="animation.gif" alt="Animated GIF" />
        </CSSTransition>
      </div>
    );
  }
}

export default AnimatedComponent;

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}