Реактивная группа перехода и анимации

Question

Проблема в том, что у меня есть форма с тремя состояниями: по умолчанию, ошибка и успех. В зависимости от состояния, конкретный компонент отображается в DOM. Мне нужно добавить анимацию постепенного исчезновения, когда этот компонент входит или выходит.

Я попробовал с помощью CSS, GSAP (но не хочу устанавливать больше пакетов в мой проект) и сейчас пытаюсь с помощью response-transition-group.

Для простоты я создал компонент "error" следующим образом:

export default class NewsletterFormError extends React.Component {
   componentWillMount() {
   }
   componentDidMount() {
   }
   render() {
      return (
        <div className="NewsletterFormError">
          I'm an error message
        <style jsx>{`
          .NewsletterFormError {
            font-size: 50px;
          }  
        `}</style>
        </div>
    )
  }
}

И на странице индекса у меня есть:

    { this.state.formError &&
        <CSSTransitionGroup
        transitionName="test"
        transitionAppear={true}
        transitionAppearTimeout={200}            
        transitionEnter={true}
        transitionEnterTimeout={2000}
        transitionLeave={true}
        transitionLeaveTimeout={2000}>
          <NewsletterFormError />
        </CSSTransitionGroup>
      }

Для некоторого резонанса, когда this.state.formError является true, компонент рендерится, и постепенное появление завершено, но когда состояние изменяется на falseзатухание не работает.

Answer 1

К сожалению, чистые группы React CSS Transition не могут запустить анимацию, когда компонент отключен. Смотрите этот вопрос GitHub для более подробной информации. Этот репозиторий со сравнением методов анимации в реакции может быть полезным, они рекомендуют использовать группы React CSS Transition в сочетании с GSAP или Anime.js