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

和fade-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

好吧，我已经想出了这样的东西

首先，使用fade-elements组件包装内容

    {{#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-elements.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();
    },
});