Question

成为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为真且只有纯文本呈现在容器类）？

Answer 1

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

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

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

如果您是超级turbo用户，可以查看我的文章的CodeSandbox回购，看看它是否是您可能正在寻找的： https://zw8n483zym.codesandbox.io/

使用React Transition Group

1 个答案: