Блог

У меня есть компонент анимации реакции внутри блока if следующим образом;

 import { CSSTransitionGroup } from 'react-transition-group'

......
......
......
......


render() {
   return(
      <div className="App"
         {
           this.state.isloading 
             ? <div className="loader"></div>
             : <CSSTransitionGroup
                 transitionName="example"
                 transitionEnterTimeout={1000}
                 transitionLeaveTimeout={750}
               >
                 {this.state.hot_list.length > 0 
                   ? <Displaycont hot_list={this.state.hot_list} /> 
                   : null}
              </CSSTransitionGroup>
          }
      </div>
 )
}
  

При этом анимация отображается не только для компонента «Displaycont».

Если я удалю блок If, анимация будет отображаться так, как ожидалось. Я оформляю ее так, как показано здесь;

https://reactjs.org/docs/animation.html#low-level-api-reacttransitiongroup

Есть идеи, что я могу делать неправильно?

CSSTransitionGroup должна быть всегда смонтирована, и только ее дочерние элементы должны быть отображены условно.

Я не уверен в причине, но все примеры документации React делают это таким образом. Я думаю, это из-за CSSTransitionGroup методов жизненного цикла и того, как они работают.

Однако вот как вы можете это сделать:

 render () {
  const { isLoading, hot_list } = this.state

  return (
    <div className='App'>
      { isLoading ? <div className='loader' /> : null }
      <CSSTransitionGroup
        transitionName='example'
        transitionEnterTimeout={1000}
        transitionLeaveTimeout={750}
      >
        { isloading amp;amp; hot_list.length > 0 ? <Displaycont hot_list={hot_list} /> : null }
      </CSSTransitionGroup>
    </div>
  )
}