使用 React Transition Group 离开组件动画答案

【问题标题】：Leaving component animation with React Transition Group使用 React Transition Group 离开组件动画
【发布时间】：2017-07-13 14:13:21
【问题描述】：

刚接触 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 为真并且在容器类）？

【问题讨论】：

看看这个stackoverflow.com/questions/45822833/…

标签： javascript reactjs css-animations transition

【解决方案1】：

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

简短的回答是您可以使用 react-transition-group 库将挂钩添加到 react-router 中，这使您可以控制页面退出事件，这意味着您可以在组件卸载之前对其进行任何操作。

您可以使用 CSS 或包含更多野兽模式的马力库，例如 GSAP。

如果您是 Ultra turbo 用户，您可以查看我的文章的 CodeSandbox 存储库，看看它是否是您可能正在寻找的内容： https://zw8n483zym.codesandbox.io/

【讨论】：