Animation support in Ember 1.1

Proposals
56

I have implemented a route animation API which I would like to share to be considered, I think is simple and could be used on multiple cases:

My main requisites are:

  • Be able to animate with CSS or JS.

  • A transition should be a step in my route transition process.

    Route.extend({

      animation: function(transition) {

    var applicationController = this.controllerFor('application'); 

    return this.animationPromise(transition, function() {

        applicationController.set('position', -1);
    });
 
  }

    });

    Route.extend({

      animation: function(transition) {
    return new Ember.Promise(function(resolve, reject) {
           $('#view-element').animate(xxxx, function() {
                resolve();
           });
    };
  }

    });

animation hook supports returning a promise object on the same way than ‘model’, ‘beforeModel’ and ‘afterModel’ hooks.

I think, that having integrated animation in the chained promise of the route transition solves some of the @machty considerations.

We could test right now this approach if we rewrite HandlerInfo.resolve method (router.js) like this example.

.then(animation, null, this.promiseLabel("Animation"))

I am sharing a working gist making animation with CSS classes bound to object properties which is the way I prefer. This examples requires to disable the renderTemplate default convention to have loaded all the route templates to have immediate animations.

Feedback?