Angular.jsでDeferredしたくて頑張ってみたらcss animationが綺麗に書けた ref: http://qiita.com/cancer/items/57ac6b3b0b5d04ed74d6

file0.txt

myDeferredA = (state) ->
    deferred = $q.defer()
    successMsg = 'Success!'
    errorMsg = 'Error!'

    setTimeout( ->
        $scope.$apply ->
            if state == 0
                deferred.resolve successMsg
            else
                deferred.reject errorMsg
    , 3000)

    deferred.promise

promiseA = myDeferredA(Math.random()*2|0)
promiseA.then (msg) ->
    console.log "success: #{msg}"
, (msg) ->
    console.log "error: #{msg}"

file1.txt

$q.when(myDeferredA, myDeferredB, myDeferredC).then ->
    console.log "all promises are completed!!"

# 
# myDefferedA#resolve() | complete |
# myDefferedB#resolve() | complete | -> success
# myDefferedC#resolve() | complete |
#

file2.txt

$q.when(myDeferredA, myDeferredB, myDeferredC).then ->
    console.log "some one promise is completed!!"

# 
# myDefferedA#resolve() | -> not complete |
# myDefferedB#resolve() | ->     complete | -> success
# myDefferedC#resolve() | -> not complete |
# 

file3.txt

animation = cssAnimation.create element
animation
    .end(->
        ...
    ).end(->
        ...
    ).end

file4.txt

class Animation
    constructor: (elem) ->
        css = $window.getComputedStyle elem[0], ''
        duration = css[supportAnimation.duration] || '0s'
        @elem = elem
        @_msec = +duration * 1000
        @_queue = []
        @_isProgress = false
        @_promise = null

file5.txt

# eventをbindしてdeferオブジェクトを返す
set: (event, callback, isReturnPromise) ->
  isReturnPromise = false unless isReturnPromise?
  _dfdFunc = () =>
    dfd = $q.defer()

    @elem.bind event, =>
      @elem.unbind event, callback
      # callbackの中でresolve/rejectできるようにしておく
      callback.call(@, dfd)
      dfd.resolve() unless isReturnPromise

    return dfd.promise

  @done _dfdFunc
  return @

# animationEnd用のsetラッパー
end: (callback, isReturnPromise) ->
  return @set supportAnimation.end, callback, isReturnPromise

file6.txt

supportAnimation = do ->
    el = document.createElement 'tada'
    transEndEventNames =-
        'WebkitAnimation' : 'webkitAnimationEnd'
        'animation'          : 'animationend'
    transPropNames =-
        'WebkitAnimation' : 'webkitAnimationDuration'
        'animation'          : 'animationDuration'

    for name of transEndEventNames
        if el.style[name] isnt undefined
            return {
                end         : transEndEventNames[name],
                duration : transPropNames[name]
            }

file7.txt

# promiseのsuccessCallbackに`callback`を追加する
# promiseが無ければ`callback`を実行して、promiseを作る
done: (callback) ->
    if @_promise == null
        @_promise = callback.call(@)
    else
        @_promise = @_promise.then(callback)

file8.txt

return {
    create: (elem) ->
        new Animation(elem)
}

file9.txt

module.controller 'hoge', ['cssAnimation', (cssAnimation) ->
    element = angular.element document.querySelector '.animation'
    animation = cssAnimation.create element
    animation
        .end(->
            console.log '1st animation is ended'
        ).end(->
            console.log '2nd animation is ended'
        ).end((dfd) ->
            $timeout(->
                console.log '3rd animation is ended'
                dfd.resolve()
            , 3000)
        , true).done(->
            console.log 'all animations are ended'
        )
]