Ember.enrutador js: Cómo animar transiciones de estado

Voy a ampliar la respuesta de Lesyk. Si necesita aplicarlo a varias vistas de una manera seca, puede crear una clase de personalización como esta:

App.CrossfadeView = {
  didInsertElement: function(){
    //called on creation
    this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
    //called on destruction
    this.$().slideDown(250);
  }
};

Y luego en su código lo aplica en sus diversas clases de vista. Como Ember depende de jQuery, puede usar casi cualquier animación jQuery.

App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);

Se encontró con este mismo requisito en mi aplicación. Probé Ember Animated Outlet , pero no me dio la granularidad que necesitaba (animaciones específicas de elementos).

La solución que funcionó para mí fue la siguiente {

Cambiar Enlace a para que sea una acción

{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}

Se convierte...

<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>

Crear método para goToTodos en el controlador actual

App.IndexController = Ember.Controller.extend({
    goToTodos: function(){

        // Get Current 'this' (for lack of a better solution, as it's late)
            var holdThis = this;

        // Do Element Specific Animation Here
            $('#something').hide(500, function(){

                // Transition to New Template
                    holdThis.transitionToRoute('todos');

            });

    }
});

Finalmente use Para animar elementos en la plantilla Todos, use didInsertElement en la vista

App.TodosView = Ember.View.extend({
    didInsertElement: function(){

        // Hide Everything
            this.$().hide();

        // Do Element Specific Animations Here
            $('#something_else').fadeIn(500);

    }
});

Hasta ahora, esta es la solución más elegante que he encontrado para animaciones específicas de elementos en transición. Si hay algo mejor, me encantaría escuchar!

Sé que esto es bastante antiguo, pero la mejor solución para esta animación específica del contexto actual es probablemente ember liquid fire.

Te permite hacer cosas como esta en un archivo de transición:

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};

He encontrado otra solución desplegable que implementa animaciones en vistas: ember-animate

Ejemplo:

App.ExampleView = Ember.View.extend({

    willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }
}

Demo: sitio web personal del autor

App.SomeView = Ember.View.extend({
  didInsertElement: function(){
   //called on creation
   this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
   //called on destruction
   this.$().slideDown(250)
  }
});