React AnimationMixin - for Animate.css

AnimationMixin.js

// Extracted from a live application. Known to work with latest Chrome/Firefox
// and Animate.css. (IE untested)
export let AnimationMixin= {

  playAnimation( animation='pulse', speed=1000) {
    if(! this.isMounted()) {
      log.warn( "Trying to call .playAnimation() on an unmounted component!")
      return
    }

    let node= this.getDOMNode()

    if(! node.classList.contains( 'animated')) {
      node.classList.add( 'animated')
    }

    if( this._animating) {
      node.classList.remove( this._animating)
      clearTimeout( this._animationTimer)
      this._animating= false
      forceRepaint( node)
    }

    node.style.animationDuration= speed +'ms'
    node.classList.add( animation)
    this._animating= animation

    this._animationTimer= setTimeout(() => {
      node.classList.remove( this._animating)
      this._animating= false
    }, speed + 1)
  }

}

function forceRepaint( node) {
  node.parentNode.style.cssText += ';-webkit-transform:rotateZ(0deg)'
  node.parentNode.offsetHeight  // jshint ignore:line
  node.parentNode.style.cssText += ';-webkit-transform:none'
}