Заметки про React(@ru_react_notes). CSS анимации используя React CSS анимации предоставляют декларативное API для анимации DOM элементо

CSS анимации используя React CSS анимации предоставляют декларативное API для анимации DOM элементов. Нужно всего лишь указать параметры анимации и определить keyframes, описывающие поведение в заданных точках. Тем не менее, в приложениях, где используется много анимаций, будет сложно поддерживать большое количество анимаций, написанных в CSS. В техническом блоге BBC рассказали про декларативный подход к использованию CSS анимаций в React через компоненты-анимации. Такой подход позволяет через композицию объединить несколько анимаций.

<FadeIn duration={2} delay={0}>
  <Zoom from={1} to={2} duration={2} delay={2}>
    <FadeOut duration={2} delay={4}>
      <RedBox />
    </FadeOut>
  </Zoom>
</FadeIn>

С одной из проблем, с которой столкнулись авторы, является определение нужных переходов, в каждом из которых нужно запускать свою анимацию. Для решения данной проблемы используется библиотека по работе с конечными автоматами xstate. medium.com/bbc-des…582c033a