Posso dare alla vista un'animazione show in emberjs

Question

Ecco un esempio utilizzando il router emberjs http://jsbin.com/agameq/edit. Ora voglio avere qualche animazione di showup, come fadeIn o fadeOut, quando il percorso è cambiato. cosa dovrei fare?

Answer 1

Ogni View in brace ha un metodo denominato didInsertElement:

Chiamato quando l'elemento di visualizzazione è stata inserita nel DOM. Ignora questa funzione per eseguire qualsiasi impostazione che richiede un elemento nel documento .

Tutte le viste brace hanno anche un $ che è un riferimento a jQuery, in modo da poter avvolgere qualche elemento nella vista con esso e applicare le modifiche ad esso come ad esempio:

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

Oppure si può chiamalo senza argomenti (come $()) per restituire la vista corrente racchiusa da jQuery.

per animare una vista come si entra in quella vista/percorso, fare questo nella vostra App.UsersView:

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

(Nota: la mia animazione è piuttosto scadente, ma è solo per mostrare dove per chiamare il metodi, fanno una vera e propria animazione)

Ecco una versione modificata di your JSBin

Answer 2

in seguito alla risposta da @MilkyWayJoe, probabilmente avrete bisogno di nascondere la vista prima di inserti ng esso, impostando la proprietà per 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` 
     }); 
    } 
}); 

Oppure usare this animation Mixin, che consente di animare Visualizzazioni modificando un insieme di proprietà CSS osservati:

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