使用React Transition Group实现组件动画效果的离开过渡效果

Question

作为 React 的新手，我有这样一个问题 - 我有两个 React 组件，父组件是：

class Container extends Component {

  render(){
    if(!this.props.someProps){
      return (
        <div className="container-text">
          <Intro />
        </div>
      )
    } else {
      return(
        <div className="container-text">
          Some text
        </div>
      )
    }
  }
}

父组件根据某个属性渲染子组件。子组件是：

export default class Intro extends Component{

  constructor(props){
    super(props)

    this.state={
      animated: false
    }
  }

  componentDidMount(){
    this.setState({
      animated:true
    })
  }


  render(){
    return(
      <CSSTransition
        in={this.state.animated}
        timeout={1000}
      classNames='fade'>
        <div>
          <div className='intro-text'>
            <p>choose</p>
            <p>the</p>
            <p>situation</p>
          </div>
        </div>
      </CSSTransition>
    )
  }
}

当组件初始加载时，我会得到淡出动画，但是我不明白在它离开DOM时如何对其进行动画处理（基本上是当this.props.someProps为真且纯文本呈现在Container类中时）？

- Ndee

---

请查看此链接：https://stackoverflow.com/questions/45822833/animate-react-component-when-unmount-leave/45822902#45822902 - Artur Carvalho

Answer 1

我前几天写了一篇相关文章。 https://medium.com/@agm1984/how-to-manage-page-transition-animations-in-react-ba09c66655c6

简单来说，你可以使用react-transition-group库向react-router添加钩子，从而控制页面退出事件，这意味着在组件卸载之前，你可以对其进行任何操作。

你可以使用CSS或者包含更加强大的库，例如GSAP。

如果你是一个超级快速用户，你可以查看我的文章的CodeSandbox仓库，看看它是否符合你的需求： https://zw8n483zym.codesandbox.io/

- agm1984