Как сделать анимация в react?

Question

[Oversec]

Необходимо реализовать разного рода анимацию (вращение колеса, появление элементов, скрытие блока). Читал про ReactCSSTransitionGroup, но он по сути появляет с hide/show анимацией. А с более сложной анимацией как быть? refs юзать для получения элемента в DOM? Понимаю что jquery не выход, но document.getElementById не работует у меня (хотя тоже считаю это плохим решением). Посоветуйте, как лучше добавлять класс к элементу, включать rotate анимацию и тд.

Answer 1

[Хазрат Гаджикеримов]

В чем проблема? держите в state начальные значения, при определенном событии добавляете/удаляете класс у элемента. Анимацию необходимо делать на CSS, так вы повысите производительность приложения, так как рендеринг чаще всего будет происходить на GPU.

А если вам очень надо в react'e это делать, то прочитайте про Refs-атрибуты

Comments

[Oversec]

Просто держать класс в state и соответсвенно сетить класс claaName={state.className}?

[Хазрат Гаджикеримов]

Oversec: в state держать состояние, допусти checkboxStatus: false начальное состояние. Пользователь кликнул по элементу, обработал клик в методе, и там же изменил состояние с помощью this.setState({checkboxStatus: true}), после чего рендер перерисовывает компонент с уже новым состояние.
Естественно у самого элемента должна быть логика обработки состояние, что то вроде:

let status = !this.state.checkboxStatus ? '' : 'checked'

return (
<div clasName={`checkbox ${status}`}></div>
)

Answer 2

[Vlad Feninets]

можно еще юзать готовые либы, например - https://github.com/chenglou/react-motion