Как реализовать анимации в React?

Question

[Александр Вульф]

Добрый день! Расскажите мне, пожалуйста, об анимации в React. Нужно мне, например, при удалении компонента со страницы реализовать плавное исчезновение. Или, наоборот, при добавлении анимировать всплытием. Как поступить? Относится ли к этому CSSTransitionGroup и как это едят?

Answer 1

[Никита Гущин]

Если вам нужно плавно скрыть элемент - CSSTransitionGroup вполне подойдет. Прочтите документацию - https://facebook.github.io/react/docs/animation.html (не вижу смысла здесь ее переписывать). В общем принцип работы таков - компонент CSSTransitionGroup сохранит элемент в DOM на время перехода (анимации) и сразу после ее завершения - удалит (если речь об удалении DOM).

Вот так у меня выглядит код для такого меню:

<CSSTransitionGroup transitionName="ProductCategoriesMenu--submenu-transition" transitionEnter={false}>
          {category.products.length && isCategorySelected ? this.renderSubMenu(category) : null}
        </CSSTransitionGroup>

.ProductCategoriesMenu--submenu-transition-leave {
  max-height: 1000px;
  overflow: hidden;
}

.ProductCategoriesMenu--submenu-transition-leave-active {
  max-height: 0;
  transition: max-height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Comments

[Александр Вульф]

Да, документацию по CSSTransitionGroup я и не заметил. А как родительский элемент понимает, что элемент, являющийся его ребенком добавился/удалился?

[Никита Гущин]

Александр Вульф: у родительского элемента измениться props.children -> раньше там был элемент, а после удаления станет null\false\undefined

Answer 2

[Андрей Чернышев]

Вроде как можно через componentWillMount и componentWillUnmount навешывать классы для анимаций и уже на css её реализовывать.. Нет ?

Comments

[Александр Вульф]

на componentWillMount еще можно исхитрится, а вот после componentWillUnmount компонент почти сразу вырезается из DOM.