CSS Animation in emberjs

1

I’m trying to make animations when an element gets inserted or hidden using {{bind-attr class="isExpand:fadeIn:fadeOut"}}. On insert the animation works great, because after getting inserted its the job of the animate to reveal it. But on toggle is false, ember fires first and the element gets destroyed without running the animation.

Any ideas how to fix this?

2

This was a hack I put together. It feels pretty messy.

In an Ember View:

destroy: function(){
    var _super = this._super,
        self = this

    if (this.get('destroyingClass')){
        this.$().one('animationend MSAnimationEnd webkitAnimationEnd', function(){
            _super.call(self)
        })
        this.$().removeClass(this.get('enteringClass')).addClass(this.get("destroyingClass"))
    } else {
        this._super()
    }
},
3

Just to be clear for others, the goal here is to prevent ember from removing the element from the DOM until the animation has finished.

I would agree that Scott’s solution appears messy because it essentially creates a new destroy method which doesn’t actually destroy anything so it’s not semantically correct. Instead it sets up an event to call the actual destroy method at some later time. That being said, I can’t think of a better alternative given the way ember currently works.

In an ideal world, I think it would be better to over ride the the willDestroy method on the Ember.View class and return a deferred object that resolves when the animation has completed. Ember would be waiting for this promise to resolve before continuing on to the actual destroy method.

There might be hope if you look at this line:

https://github.com/emberjs/ember.js/blob/v1.1.1/packages/ember-runtime/lib/system/core_object.js#L316

Because the willDestroy is in a different queue of the run loop than the destroy, there is likely a way to keep the run loop from advancing to the next stage of the queue until the animations have finished which would achieve the same affect as the promise idea if mentioned above. I’m just not sure how to do it. Maybe someone more experienced with the run loop can confirm if this is possible or even a good idea,

4

Thanks @scottmessinger and @mattmazzola for taking the time to respond, and i really appreciate it, but i don’t think is the way to go. I’m thinking about a promises solution or something. Maybe like do animate then destroy.