From 10e209d8e0601ded06e05df573e76935e175cb1c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 27 Jan 2020 11:04:11 +0100 Subject: [PATCH] Change number animations direction based on decrease or increase (#12971) --- .../mastodon/components/animated_number.js | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/app/javascript/mastodon/components/animated_number.js b/app/javascript/mastodon/components/animated_number.js index 3bfe86aa6..f3127c88e 100644 --- a/app/javascript/mastodon/components/animated_number.js +++ b/app/javascript/mastodon/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 ; @@ -37,7 +54,7 @@ export default class AnimatedNumber extends React.PureComponent { {items => ( {items.map(({ key, data, style }) => ( - 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}> + 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}> ))} )}