css3 - create - Router Ember.js: Cómo animar transiciones de estado

ember on hover

Question

¿Alguien ha encontrado una buena manera de animar las transiciones de estado?

El enrutador elimina inmediatamente la vista del DOM. El problema con eso es que no puedo diferir eso hasta el final de la animación. Nota: estoy usando v1.0.0-pre.4 .

Answer 1

Billy''s Billing acaba de lanzar un módulo Ember que admite transiciones animadas.

Answer 2

Encontré este mismo requisito en mi aplicación. Intenté Outlet Animated Outlet , pero no le di la granularidad que necesitaba (animaciones específicas de elementos).

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

Cambiar linkTo para ser una acción

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

Se convierte en ...

<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: 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 el momento, esta es la solución más elegante que he encontrado para animaciones específicas de elemento en la transición. Si hay algo mejor, ¡me encantaría escuchar!

Answer 3

Expandiré la respuesta de Lesyk. Si necesita aplicarlo a varias vistas de forma 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 diferentes clases de vista. Como Ember depende de jQuery, puedes usar prácticamente cualquier animación jQuery.

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

Answer 4

He encontrado otra solución adicional que implementa animaciones en Views: 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);
    }
}

Demostración: sitio web personal del autor

Answer 5

Sé que esto es bastante antiguo, pero la mejor solución para esta animación específica del contexto de hoy es probablemente un incendio líquido .

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'')
  );
};

Answer 6

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