如何在React中对条件元素进行动画处理

npm install react-transition-group

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

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

  toggleElement = () => {
    this.setState(prevState => ({
      showElement: !prevState.showElement
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleElement}>Toggle Element</button>
        <CSSTransition
          in={this.state.showElement}
          timeout={300}
          classNames="fade"
          unmountOnExit
        >
          <div className="element">Conditional Element</div>
        </CSSTransition>
      </div>
    );
  }
}

.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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

npm install react-spring

import React from 'react';
import { useTransition, animated } from 'react-spring';

const MyComponent = () => {
  const [showElement, setShowElement] = React.useState(false);

  const transitions = useTransition(showElement, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  const toggleElement = () => {
    setShowElement(prevState => !prevState);
  };

  return (
    <div>
      <button onClick={toggleElement}>Toggle Element</button>
      {transitions.map(({ item, key, props }) =>
        item && (
          <animated.div key={key} style={props} className="element">
            Conditional Element
          </animated.div>
        )
      )}
    </div>
  );
};