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}} 

И выгорают-с будет иметь

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

Ну я уже успел выйти что-то вроде этого

Сначала вы заключаете содержимое с компонентом Fade-элементы

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

Fade-elements.hbs

{{yield}} 

Fade-элементы. 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(); 
    }, 
});