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?Posso dare alla vista un'animazione show in emberjs
risposta
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
Grazie. Molto interessante. Non sapevo che Ember avesse implementato il didinSertElement ispirato al cacao. Il tuo esempio usa la funzione jQuery.animate? Significato didInsertElement da Ember e poi passarlo a jQuery per roba UX, giusto? – nembleton
@nembleton Corretto, in questo momento sto chiamando la funzione jQuery ['animate'] (http://api.jquery.com/animate/), perché Ember già la fornisce alle sue viste, tutto ciò che serve avere il riferimento allo script per jQuery – MilkyWayJoe
Grazie mille. Il tuo rispondente ha risolto i miei grossi problemi. Voglio usare emberjs per fare qualche webapp e l'ux è davvero importante per questo. Ma in questo momento l'animazione usa jQuery l'animazione può essere rimpiazzata da trucchi css3? – aisensiy
in seguito alla risposta da @MilkyWayJoe, probabilmente avrete bisogno di nascondere la vista prima di inserti ng esso, impostando la proprietà per isVisible
false
:
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);
}
});
Oh, è bello. Leggerò l'articolo e proverei. Come puoi conoscere queste informazioni, leggendo il codice sorgente? – aisensiy
Il codice sorgente trovato [qui] (http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js) (che è l'ultimo) ha tutti i commenti rispetto alla [documentazione] (http://emberjs.com/documentation/) che non è stato completamente aggiornato (perché la maggior parte degli sforzi sono concentrati nella [1.0 milestone] (https://github.com/emberjs/ember.js/issues? etichette = & traguardo = 1 & page = 1 & state = aperto)). Suggerisco anche a [Google per "Ember Gist"] (https://www.google.ca/#hl=en&q=ember+gist) e otterrai molte risorse fantastiche. – MilkyWayJoe
Ciao, come posso accedere agli elementi dom nel controller ... Ad esempio, carico alcuni elementi nel controller e ho bisogno di ridimensionare la larghezza del genitore degli elementi. Come posso ottenere dom padre e impostare la sua larghezza nel controller? – aisensiy
- 1. Come mostrare/nascondere una vista in EmberJS
- 2. vista emberjs con raphael o d3
- 3. Posso derivare parzialmente Show?
- 4. Vim show newline alla fine del file
- 5. Posso aggiungere un timer alla mia vista per passare alla vista successiva?
- 6. Accesso alla vista in awakeFromNib?
- 7. Convalida modulo in EmberJS
- 8. Emberjs scorre verso l'alto quando si cambia vista
- 9. Posso dare alla finestra di correzione rapida una diversa riga di stato in vim?
- 10. contenteditable ed emberjs
- 11. Ottenere percorso principale in EmberJS
- 12. CodeIgniter - accesso alla variabile $ config in vista
- 13. Come posso aggiungere una scheda alla vista contatti di Tridion?
- 14. Come posso aggiungere un'ombra alla vista del basso?
- 15. Passa i dati alla vista in Express
- 16. Dare un comando a Visualizza in MVVM
- 17. emberjs binding
- 18. Perché non posso ottenere Show qui?
- 19. Emberjs tornare all'annullamento
- 20. iOS: Ritornare alla vista precedente
- 21. Devo sempre dare un valore di ritorno alla mia funzione?
- 22. SelectionBinding per Checkbox in EmberJs
- 23. Come dare una funzionalità simile alla dichiarazione con la classe?
- 24. Collegamento di ViewModel alla vista in Silverlight
- 25. EmberJS Nested Views and Controllers
- 26. Emberjs Handlebar precompilatore
- 27. Come posso fare l'equivalente di "SHOW TABLES" in T-SQL?
- 28. Perché non posso usare lo show segue in xcode 6.1?
- 29. Come posso usare SHOW CREATE TABLE in una sottoquery?
- 30. passa un modello diverso alla vista parziale
Ho recentemente aggiunto un [ progetto in GitHub] (https://github.com/MilkyWayJoe/ember-router-with-webapi) come mio processo di apprendimento, potresti voler dare un'occhiata (è ancora piuttosto difficile, ma aggiornerò man mano che avanzo) – MilkyWayJoe
@MilkyWayJoe Ok, lo farò ~ grazie ~ – aisensiy