bugfix sometimes choppy animation

Author: transitive-bullshit

example/yarn.lock

@@ -91,6 +91,10 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+animejs@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-2.2.0.tgz#35eefdfc535b81949c9cb06f0b3e60c02e6fdc80"
+
 ansi-align@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
@@ -1353,6 +1357,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 [email protected]:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -5184,7 +5192,7 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
-[email protected]:
+[email protected], raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:

src/index.js

@@ -55,6 +55,11 @@ export default class ParticleEffectButton extends Component {
     progress: 0
   }
 
+  _rect = {
+    width: 0,
+    height: 0
+  }
+
   componentWillReceiveProps(props) {
     if (props.hidden !== this.props.hidden) {
       const { status } = this.state
@@ -88,12 +93,14 @@ export default class ParticleEffectButton extends Component {
     const canvasStyles = { }
 
     if (status === 'hiding' || status === 'showing') {
-      const translateProp = this._isHorizontal() ? 'translateX' : 'translateY'
-      const translateValue = direction === 'left' || direction === 'top'
+      const prop = this._isHorizontal() ? 'translateX' : 'translateY'
+      const size = this._isHorizontal() ? this._rect.width : this._rect.height
+      const value = direction === 'left' || direction === 'top'
         ? progress : -progress
+      const px = Math.ceil(size * value / 100)
 
-      wrapperStyles.transform = `${translateProp}(${translateValue}%)`
-      contentStyles.transform = `${translateProp}(${-translateValue}%)`
+      wrapperStyles.transform = `${prop}(${px}px)`
+      contentStyles.transform = `${prop}(${-px}px)`
     } else if (status === 'hidden') {
       wrapperStyles.visibility = 'hidden'
       canvasStyles.visibility = 'hidden'
@@ -168,7 +175,6 @@ export default class ParticleEffectButton extends Component {
       begin: onBegin,
       update: (anim) => {
         const value = anim.animatables[0].target.value
-
         setTimeout(() => {
           this.setState({ progress: value })
         })