Ember.js: Animieren der Löschung/Entfernung eines Elements oder Datensatzes

Question

Ich bin auf Ember 1,13, using ember-liquid-fire für einige andere Dinge, aber mit diesem möchte ich animieren Löschen eines Datensatzes durch Fading oder Ausschieben. Wie es jetzt ist, verschwindet es sofort, was ein wenig nervtötend ist.

Hier ist die Benutzeroberfläche; die Vorlage mit nur einem {{#each}} Helfer über das Modell

Hier ist meine Löschaktion iterieren: verwenden {{liquid-bind}}

delete: function(item) { 
    this.get('model').removeObject(item); 
    item.destroyRecord(); 
} 

Es wurde an anderer Stelle vorgeschlagen, aber ich bin nicht sicher, wo Um es in mein Markup zu setzen, da ich eine Tabelle verwende, und die {{each}} Wraps die <tr>, also, wenn ich die flüssige Helfer um das, dann gibt es div s als Kinder meiner Tabelle anstelle von Zeilen.

Wenn jemand weiß, wie man das macht (mit flüssigem Feuer oder auf andere Weise), würde ich es gerne wissen!

Answer 1

Die Bindung Element sollte geändert werden, um die Flüssigkeit-Feuer auszulösen.

Bitte nehmen Sie sich einen Blick auf this twiddle

Answer 2

Statt flüssigkeits Feuer zu verwenden, zu versuchen, ging ich eine einfachere Route animate.css zu verwenden.

Um dies zu tun, musste ich eine Komponente für meine Tabellenzeilen erstellen. liquid-fire fügt divs ein, was natürlich das Tabellenlayout durcheinanderbringt.

In meiner Komponente, füge ich nur die Animation Klasse, und wenn die Animation erfolgt, die Aktion das Einzelteil zu entfernen, etwa so:

//components/table-record.js 
actions: { 
    handleDelete(item) { 
     this.$().addClass('animated zoomOut'); 
     this.$().one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
     () => { 
      this.sendAction('deleteAction',item); 
     } 
    ); 
    } 
    } 

Siehe this twiddle für weitere Informationen.