How to implement animation inside a React component?

Question

css

Good afternoon
While learning React, I ran into an animation problem for individual parts of a component.
Subject - the following render occurs:
render () {
const number = (this.state.number)
return (
*some html*
{number}
*some html*
)
}
Accordingly, when the state changes, the content of the header changes. The question is - is it possible to somehow animate this change without moving it into a separate component?

Answer 1

Use the react-motion lib.

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>