Ember: How to make element removal visually better?

Question

Hi is there a way to use fade out on a component/element removal, using pure CSS? Currently delete happens so fast its hard for end-user to see what actually happened.

For instance i have this code for fade-in. It's easy to add and you dont need to change any script logics.

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

Ideally it would be written like this

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

And fade-c would have

willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }

Way i tried myself (exactly the thing i want to ignore, changing delete codes)

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



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

If you put in some CSS for a fadeOut class or something, you can use Javascript to 1) assign a fadeOut class, and 2) after a delay of 1 second, remove the element. — Mr Lister, Mar 04 '16 at 08:24
What do you mean by delete? Are you deleting the record from the store or just removing the dom node? Can you add the code that's handling the removal? And why aren't you using actions to do it? — Patsy Issa, Mar 04 '16 at 08:50
I am using actions, normally its an array that contains records. But i need some animation behind it. Because right now it happens instantly. — kristjan reinhold, Mar 04 '16 at 09:05
@Kitler I've added an answer, would you give your opinion about it. — kristjan reinhold, Mar 07 '16 at 08:28
Damn, still a slight issue parent.parent adds it to the end of array not in between or something :D — kristjan reinhold, Mar 07 '16 at 08:48

kristjan reinhold · Answer 1 · 2016-03-07T11:51:45.933

Well i've managed to come out with something like this

First you wrap content with fade-elements component

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

Ember: How to make element removal visually better?

1 Answers1