Ember：如何讓視覺效果更好地去除元素？

Question

嗨有沒有一種方法來使用淡出組件/元素刪除，使用純CSS？目前刪除發生得如此之快以至於終端用戶很難看到實際發生的情況。

例如我有這個代碼淡入。這很容易添加，你不需要改變任何腳本邏輯。

{{#each dataContainer as |data|}} 
     <div class="panel custom-panel fade-in"> 
      xx 
      <button class="remove" {{action "Remove"}}> Delete </button> 
     </div> 
{{/each}} 


.fade-in{ 
    animation: fadeIn 1s; 
} 

@keyframes fadeIn { 
    from { 
     background-color: #fff7c0; 
     opacity:0; 
    } 
    to { 
     background-color: white; 
     opacity:1; 
    } 
} 

理想情況下是這樣寫的

{{#each items as |item|}} 
    {{#fade-component}} 
     {{content-component}} 
    {{/fade-component}} 
{{/each}} 

和淡入-C將有

willAnimateIn : function() { 
     this.$().css("opacity", 0); 
    }, 
​ 
    animateIn : function (done) { 
     this.$().fadeTo(500, 1, done); 
    }, 
​ 
    animateOut : function (done) { 
     this.$().fadeTo(500, 0, done); 
    } 

辦法，我嘗試過自己（正是我想忽略的東西，改變刪除代碼）

$('.remove.btn').click(function() { 
     $(this).closest('.fade-in').addClass('fade-out') 
}); 



removeRecord: function(wrappedRecord) { 
     Ember.run.later((function() { 
      xx 
     }), 500); 
    } 

Answer 1

嗯，我已經成功地推出了這樣的事情

首先你包的內容與淡出元素成分

{{#each wrappedRecords as |record|}} 
     {{#fade-elements}} 
        <span class="custom-fade-in"> 
         {{record.name}} 
         <span class="remove" {{action "removeRecord" record}}></span>        
        </span> 
     {{/fade-elements}} 
    {{/each}} 

淡入elements.hbs

{{yield}} 

淡出元素。 js

export default Ember.Component.extend({ 
    willDestroyElement : function() { 
     var clone = this.$().clone(); 
     clone.children().removeClass('custom-fade-in') // Dont want clone to fade in 
     this.$().parent().append(clone); // Parent.parent appends it outside of "ember view div" 
     clone.fadeOut(); 
    }, 
});