Ember：如何让视觉效果更好地去除元素？

嗨有没有一种方法来使用淡出组件/元素删除，使用纯CSS？目前删除发生得如此之快以至于终端用户很难看到实际发生的情况。Ember：如何让视觉效果更好地去除元素？

例如我有这个代码淡入。这很容易添加，你不需要改变任何脚本逻辑。

{{#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); 
    }

来源

2016-03-04 kristjan reinhold

如果您为fadeOut类或其他东西放置了一些CSS，则可以使用Javascript to 1）分配一个fadeOut类，2）延迟1秒后，删除元素。 –

有一个可运行的代码片段，使它更容易帮助 –

@MrLister这正是我想要阻止的。 –

嗯，我已经成功地推出了这样的事情

首先你包的内容与淡出元素成分

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

来源

2016-03-07 08:27:43

Ember：如何让视觉效果更好地去除元素？

回答

相关问题