Add number animations (#12948)
parent
71921f6bc3
commit
76f1ed834e
@ -0,0 +1,47 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { FormattedNumber } from 'react-intl'; |
||||
import TransitionMotion from 'react-motion/lib/TransitionMotion'; |
||||
import spring from 'react-motion/lib/spring'; |
||||
import { reduceMotion } from 'mastodon/initial_state'; |
||||
|
||||
export default class AnimatedNumber extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
value: PropTypes.number.isRequired, |
||||
}; |
||||
|
||||
willEnter () { |
||||
return { y: -1 }; |
||||
} |
||||
|
||||
willLeave () { |
||||
return { y: spring(1, { damping: 35, stiffness: 400 }) }; |
||||
} |
||||
|
||||
render () { |
||||
const { value } = this.props; |
||||
|
||||
if (reduceMotion) { |
||||
return <FormattedNumber value={value} />; |
||||
} |
||||
|
||||
const styles = [{ |
||||
key: value, |
||||
style: { y: spring(0, { damping: 35, stiffness: 400 }) }, |
||||
}]; |
||||
|
||||
return ( |
||||
<TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}> |
||||
{items => ( |
||||
<span className='animated-number'> |
||||
{items.map(({ key, style }) => ( |
||||
<span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={key} /></span> |
||||
))} |
||||
</span> |
||||
)} |
||||
</TransitionMotion> |
||||
); |
||||
} |
||||
|
||||
} |
Loading…
Reference in new issue