application_route.js

// animated route transition workaround for ember
// this workaround only deals with the current view
// if you need to animate the new and the old view in parallel this won't help you.

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition){
      if(!this.isInTransition){

        // stop transition until animation is complete
        // otherwise ember will remove the current screen immediately
        // from the DOM and we can't animate
        transition.abort();
        this.isInTransition = true

        // now run animation. example:
        // set isAnimating on application controller. 
        // bind className to isAnimating in your application template.
        this.get('controller').set('isAnimating', true)
        // continue...

        var self = this;
        setTimeout(function(){

          // redo the transition once the animation is done
          // reset transition state after the retry
          // so we don't end up in an indefinite loop
          transition.retry()
          self.isInTransition = false
        }, 200)
      }
    }
  }
})