¿Puedo dar a la vista una animación de presentación en emberjs

Question

Aquí hay un ejemplo usando el enrutador emberjs http://jsbin.com/agameq/edit. Ahora quiero tener alguna animación de presentación, como fadeIn o fadeOut, cuando la ruta cambió. ¿que debería hacer?

Answer 1

Cada View en Ember tiene un método denominado didInsertElement:

llama cuando el elemento de la vista ha sido insertado en el DOM. Reemplace esta función para realizar cualquier configuración que requiera un elemento en el cuerpo del documento.

Todos los puntos de vista de brasa también tienen un $ que es una referencia a jQuery, por lo que puede envolver algún elemento en su opinión con ella y aplicar ningún cambio en ella, tales como:

// this will animate only the tag h2, which in your case is the title of the users view 
App.UsersView = Ember.View.extend({ 
    templateName: 'users', 
    didInsertElement: function() { 
     this.$('h2').animate({ fontSize: "3em" }, 900); 
    } 
}); 

O puede llamarlo sin argumentos (como $()) para devolver la vista actual envuelta por jQuery.

para animar una vista al entrar en esa vista/ruta, hacer esto en su App.UsersView:

// this will animate the entire view 
App.UsersView = Ember.View.extend({ 
    templateName: 'users', 
    didInsertElement: function() { 
     this.$().animate({ fontSize: "3em" }, 900); 
    } 
}); 

(Nota: mi animación es bastante escaso, pero es sólo para mostrar dónde llamar la métodos, hacer una animación real)

Aquí es una versión modificada de your JSBin

Answer 2

Tras la respuesta de @MilkyWayJoe, es probable que desee ocultar la vista antes de inserti ng que, mediante el establecimiento de la propiedad a isVisiblefalse:

App.UsersView = Ember.View.extend({ 
    templateName: 'users', 

    isVisible: false, 

    didInsertElement: function() { 
     var self = this; 
     this.$().fadeIn(700, function(){ 
      self.set('isVisible', true); //inform observers of `isVisible` 
     }); 
    } 
}); 

O utilice this animation Mixin, lo que le permite animar Vistas cambiando un conjunto de propiedades CSS observados:

App.UsersView = Ember.View.extend(JQ.Animate, { 
    templateName: 'users', 

    isVisible: false, 

    // Observed CSS properties 
    cssProperties: ['display'], 

    // Optional animation properties 
    duration: 700, 
    easing: 'easeInOutCubic', 

    didInsertElement: function() { 
     this.set('display', 'block'); 
    }, 

    afterAnimate: function() { 
     this.set('isVisible', true); 
    } 
});