如何使用react-transition-group在React组件显示隐藏时增加动画

首先，确保你的项目中已经安装了 react-transition-group：

npm install react-transition-group

然后，你可以在React组件中使用它来实现动画：

// MyComponent.jsx

import React from 'react';
import { CSSTransition } from 'react-transition-group';
import './MyComponent.css'; // 包含动画样式的CSS文件

const MyComponent = ({ show }) => {
  return (
    <CSSTransition
      in={show}
      timeout={300}
      classNames="hero"
      unmountOnExit
    >
      <div className="hero-content">
        {/* Your hero component content */}
      </div>
    </CSSTransition>
  );
}

export default MyComponent;

上述代码中，CSSTransition 组件用于处理动画的入场和退场。它接受一些属性：
in 标记组件的显隐状态，并以此来激活对应的动画；
timeout 动画的持续时间；
classNames 动画的类名，准确来说是添加到动画元素的类名前缀，可结合下面示例中的.hero来理解。

接着，在 MyComponent.css 文件中定义动画样式：

/* MyComponent.css */

.hero-enter {
  opacity: 0;
  transform: scale(0.9);
}

.hero-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.hero-exit {
  opacity: 1;
  transform: scale(1);
}

.hero-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

/* Add other styling for your hero component */

这个例子中的动画是一个简单的淡入淡出和缩放效果。你可以根据你的需要修改这些样式，使其符合你的设计。

最后，你可以在父组件中控制 MyComponent 是否显示，以触发动画效果：

// ParentComponent.jsx

import React, { useState } from 'react';
import MyComponent from './MyComponent';

const ParentComponent = () => {
  const [showHero, setShowHero] = useState(false);

  return (
    <div>
      <button onClick={() => setShowHero(!showHero)}>Toggle Hero</button>
      <MyComponent show={showHero} />
    </div>
  );
}

export default ParentComponent;

通过切换showHero的值便可控制组件的显隐，同时在显隐状态变化时触发动画。

这只是一个简单的例子，实际上，你可能需要根据你的具体需求进行更复杂的动画和转场效果。framer-motion 是另一个流行的库，提供了更灵活和强大的动画控制。