使用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 = {
      showItem: false
    };
  }

  componentDidMount() {
    // 在组件首次渲染时手动添加appear类名
    this.setState({ showItem: true });
  }

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

    return (
      <div>
        <CSSTransition
          in={showItem}
          appear={true}
          timeout={300}
          classNames="fade"
        >
          <div className="item">Item</div>
        </CSSTransition>
      </div>
    );
  }
}

export default MyComponent;

.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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