diff options
| -rw-r--r-- | app/javascript/flavours/glitch/components/animated_number.js | 27 |
1 files changed, 22 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/components/animated_number.js b/app/javascript/flavours/glitch/components/animated_number.js index 6f3d30d4e..e3235e368 100644 --- a/app/javascript/flavours/glitch/components/animated_number.js +++ b/app/javascript/flavours/glitch/components/animated_number.js @@ -11,16 +11,33 @@ export default class AnimatedNumber extends React.PureComponent { value: PropTypes.number.isRequired, }; - willEnter () { - return { y: -1 }; + state = { + direction: 1, + }; + + componentWillReceiveProps (nextProps) { + if (nextProps.value > this.props.value) { + this.setState({ direction: 1 }); + } else if (nextProps.value < this.props.value) { + this.setState({ direction: -1 }); + } } - willLeave () { - return { y: spring(1, { damping: 35, stiffness: 400 }) }; + willEnter = () => { + const { direction } = this.state; + + return { y: -1 * direction }; + } + + willLeave = () => { + const { direction } = this.state; + + return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) }; } render () { const { value } = this.props; + const { direction } = this.state; if (reduceMotion) { return <FormattedNumber value={value} />; @@ -37,7 +54,7 @@ export default class AnimatedNumber extends React.PureComponent { {items => ( <span className='animated-number'> {items.map(({ key, data, style }) => ( - <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={data} /></span> + <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={data} /></span> ))} </span> )} |