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

Question

[masambrero]

Добрый день

При изучении React'а столкнулся с проблемой анимации для отдельных частей компонента.
Сабж - происходит следующий рендер:

render () {
const number = (this.state.number)
return (

*some html*

{number}

*some html*

)
}

Соответственно при изменении state содержимое заголовка меняется. Вопрос - можно ли каким-то образом анимировать данное изменения не вынося его в отдельный компонент?

Answer 1

[Максим Антонихин]

Используйте либу react-motion.

import {Motion, spring} from 'react-motion';

<Motion style={{x: spring(this.state.open ? 400 : 0)}}>
          {({x}) =>
            <div className="demo0">
              <div className="demo0-block" style={{
                WebkitTransform: `translate3d(${x}px, 0, 0)`,
                transform: `translate3d(${x}px, 0, 0)`,
              }} />
            </div>
          }
        </Motion>

Comments

[masambrero]

Спасибо, хороший вариант.