Ember.js：アイテムやレコードの削除/削除のアニメーション

Question

私はEmber 1.13、using ember-liquid-fireにいくつか他のものがありますが、これを使ってレコードをフェードインまたはスライドアウトすることでアニメーションを削除したいと考えています。今のように、すぐに消えてしまいますが、これはちょっと不快なものです。

ここにUIがあります。テンプレートはちょうどモデルここ

私削除アクションだ上で反復する{{#each}}ヘルパーを使用している：それは{{liquid-bind}}を使用するために他の場所で示唆された

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

が、私はどこか分かりません{{each}}は<tr>をラップしていますので、その周りに液体ヘルパーを置くと、divが行ではなくテーブルの子として表示されます。

誰かがこれを行う方法を知っている場合（液体火災または別の方法で）、私は知りたいです！

Answer 1

バインドアイテムは、液体の火を引き起こすように変更する必要があります。

代わりに液体火を使用しようとしているのthis twiddle

Answer 2

を見てください、私はanimate.cssを使用しての単純なルートを行ってきました。

これを行うには、テーブル行のコンポーネントを作成する必要がありました。 liquid-fireはdivsを挿入しますが、これはもちろんテーブルレイアウトを崩してしまいます。

は私のコンポーネントの内部では、私はちょうどアニメーションクラスを追加し、アニメーションが完了したときに、そのような項目を削除するアクションを送信します。

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

は、完全な詳細についてはthis twiddleを参照してください。