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

淡入淡出元素.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();
    },
});