     return
 
   close: (event) ->
-    @attrs.onClose?()
-    @get('modalManager').close()
+    @hide().then(() =>
+      @attrs.onClose?()
+      @get('modalManager').close()
+      return
+    )
     return
 
   actions: {

  classNameBindings: ['fade', 'isVis:in']
  attributeBindings: ['role', 'aria-labelledby', 'isAriaHidden:aria-hidden', 'ariaLabelledBy:aria-labelledby', 'style']
  style: (() ->
    return Ember.String.htmlSafe('display: block')
  ).property('isVisible')
  isAriaHidden: (() ->
    return "#{!@get('isVisible')}"


  didInsertElement: ->
    @._super()
    if @get('isVisible')
      Ember.run.scheduleOnce('afterRender', this, @becameVisible)
    return

  becameVisible: ->
    Em.$('body').addClass('modal-open')
    @appendBackdrop() if @get('backdrop')
    @setupBinders()
    @show()
    return

  becameHidden: ->
    Em.$('body').removeClass('modal-open')
    @removeHandlers()
    if @_backdrop
      @_backdrop.remove()
      @_backdrop = null
    return

  appendBackdrop: ->
    if not @_backdrop
      parentElement = @$().parent()
      @_backdrop = Em.$(@modalBackdrop).appendTo(parentElement)
    return

  show: () ->
    return new Ember.RSVP.Promise((resolve) =>
      if not @get('animation')
        @set('isVis', true)
        resolve()
        return
    )

  hide: () ->
    return new Ember.RSVP.Promise((resolve) =>
      @set('isVis', false)
      if not @get('animation')
        @set('isVisible', false)
        resolve()
        return

      @$().one('webkitTransitionEnd', (e) =>
        @set('isVisible', false)
        resolve()
      )
    )

  keyPressed: (event) ->
#Handle ESC
