Ember.js：動畫刪除/刪除一個項目或記錄

我在Ember 1.13，using ember-liquid-fire其他一些東西，但有了這個，我想通過淡入淡出或滑動刪除一個記錄。就在現在，它立即消失，這有點刺耳。Ember.js：動畫刪除/刪除一個項目或記錄

以下是UI;模板只是使用{{#each}}幫手迭代模型

這裏是我的刪除操作：

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

有人建議在其他地方使用{{liquid-bind}}，但我不知道在哪裏把它放在我的標記中，因爲我使用的是桌子，而{{each}}包裝了<tr>，所以如果我把液體助手放在那裏，那麼就有div作爲我的桌子的孩子而不是行。

如果有人知道如何做到這一點（使用液體火或其他方式），我很想知道！

來源

2017-03-01 redOctober13

綁定物品應該改變以觸發液體火災。

請看看this twiddle

來源

2017-03-01 20:23:06

如果我只是使用div，而不是表格，這可能會很好，但現在它並沒有真正的幫助。謝謝你嘗試。 – redOctober13

，而不是試圖使用液體火，我就用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。

來源

2017-03-01 21:34:59 redOctober13

Ember.js：動畫刪除/刪除一個項目或記錄

回答

相關問題