CSS animation in callback style

cssTo.coffee

unless window.mn? then window.mn = {}
unless window.mn.dsk? then window.mn.dsk = {}
unless window.mn.dsk.css3 then window.mn.dsk.css3 = {}
exports = window.mn.dsk.css3


exports.Easing = Easing =
  linear        : 'linear'
  ease          : 'ease'
  easeIn        : 'ease-in'
  easeOut       : 'ease-out'
  easeInOut     : 'ease-in-out'
  easeInQuad    : 'cubic-bezier(0.550, 0.085, 0.680, 0.530)'
  easeOutQuad   : 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
  easeInOutQuad : 'cubic-bezier(0.455, 0.030, 0.515, 0.955)'
  easeInQuart   : 'cubic-bezier(0.895, 0.030, 0.685, 0.220)'
  easeOutQuart  : 'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
  easeInOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'
  easeInQuint   : 'cubic-bezier(0.755, 0.050, 0.855, 0.060)'
  easeOutQuint  : 'cubic-bezier(0.230, 1.000, 0.320, 1.000)'
  easeInOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
  easeInCubic   : 'cubic-bezier(0.550, 0.055, 0.675, 0.190)'
  easeOutCubic  : 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
  easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
  easeInSine    : 'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
  easeOutSine   : 'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
  easeInOutSine : 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
  easeInExpo    : 'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
  easeOutExpo   : 'cubic-bezier(0.190, 1.000, 0.220, 1.000)'
  easeInOutExpo : 'cubic-bezier(1.000, 0.000, 0.000, 1.000)'
  easeInCirc    : 'cubic-bezier(0.600, 0.040, 0.980, 0.335)'
  easeOutCirc   : 'cubic-bezier(0.075, 0.820, 0.165, 1.000)'
  easeInOutCirc : 'cubic-bezier(0.785, 0.135, 0.150, 0.860)'
  easeInBack    : 'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
  easeOutBack   : 'cubic-bezier(0.175,  0.885, 0.320, 1.275)'
  easeInOutBack : 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'


exports.Tween = Tween =
  _transitions:
    {}
  _computedStyles:
    {}

  to: (elem, props, time, easing, callback)->
    # run after escaping the event loop for iOS
    setTimeout (=>
      propList = {}
      len = 0
      computedStyle = window.getComputedStyle elem
      unless transition = @_transitions[elem]
        transition = @_transitions[elem] = new Transition()
      for name, value of props
        if computedStyle[name] isnt String(value)
          propList[name] = value
          transition.add name, time, easing
          len++

      if len isnt 0
        listener = (e)=>
          elem = e.target
          transition = @_transitions[elem]
          transition.remove e.propertyName
          elem.removeEventListener 'webkitTransitionEnd', listener
          elem.style['-webkit-transition'] = transition.toString()
          callback?()
        elem.addEventListener 'webkitTransitionEnd', listener
        elem.style['-webkit-transition'] = transition.toString()
        for name, value of propList
          elem.style[name] = value
    ), 0


class Transition

  constructor: ->
    @_storage = {}

  add: (name, time, easing)->
    @_storage[name] =
      time  : time
      easing: easing

  remove: (name)->
    delete @_storage[name]

  toString: ->
    tmp = []
    for name, value of @_storage
      tmp.push "#{name} #{value.time / 1000}s #{value.easing}"
    tmp.join ', '

Usage

{Tween, Easing} = mn.dsk.css3
Tween.to querySelector('#foo'), {
  opacity: 0
}, 1000, Easing.easeOutQuad, ->
  console.log 'complete!!'