Javascript 将组件动画保留在“反应过渡”组中

作为新的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>
      )
    }
  }
}

类容器扩展组件{
render（）{
如果（！this.props.someProps）{
返回(
)
}否则{
返回(
一些文本
)
}
}
}

父组件基于某些道具渲染子组件。子组件是：

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>
    )
  }
}

导出默认类介绍扩展组件{
建造师（道具）{
超级（道具）
这个州={
动画：错误
}
}
componentDidMount（）{
这是我的国家({
动画：真的
})
}
render（）{
返回(
选择


处境

)
}
}

---

当组件最初装载时，我确实得到了淡入淡出动画，但我不明白如何在它离开DOM时为其设置动画（因此基本上是当this.props.someProps为true并且在容器类中仅呈现纯文本时）？

前几天我写了一篇关于这一点的文章。

简单的回答是，您可以使用

react transition group

库向

react router

添加钩子，这样您就可以控制页面退出事件，这意味着您可以在卸载组件之前对组件执行任何操作

您可以使用CSS或包含一个更具beast模式的马力库，如

GSAP

如果您是ultra turbo用户，您可以查看我的文章中的CodeSandbox repo，看看它是否是您想要的：

看看这个