Create smooth transition of block elements when removing sibling elements from DOM

Question

I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect.

When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a transition: all 0.5s ease-in-out to the .notice class had no effect on the object when its sibling was remove.

Minimal JS interpertation :

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

Better yet fiddle here :

http://jsfiddle.net/kMxqj/

I'm using a MVC framework to data-bind these objects so some native css / jQuery is preferred over a Jq plugin.

Solution 1

This should remove the clicked element with a fade out effect and then move everything below up smoothly. This will work for any notice div in the stack regardless of it position within the stack.

Try:

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut(500,function(){
        $(this).css({"visibility":"hidden",display:'block'}).slideUp();
    });
});

Fiddle here

Update August 7th, 2018:

As asked by one of the users about using pure JS to do the slideUp functionality, I've put together a quick demo using requestAnimationFrame to animate the height of an element. Fiddle can be found here.

Solution 2

jQuery's Animate() method is a great tool to learn because not only can you fade your objects in and out, but you can move them around, all at the same time.

The CSS:

.notice {
    position:relative;
    top:20px;
    width: 100%;
    height: 50px;
    background-color: #ccc;
    opacity:0;
}

The jQuery:

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
    $('.notice').animate({opacity: 1, top:0}, 1000);
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

And my jsFiddle demo

Comments

[jarmie]

The problem isn't with animating the new object in, but with with the dom removal (simulated with the fade out) the nodes following the element being removed jump up into the gap created by the removed node.

[jarmie]

this works great, tacking on a remove() as a callback to the slideUp does exactly what I need -- Fiddle: jsfiddle.net/kMxqj/19

[Mulperi]

How to do the slideUp with pure JS?

[darshanags]

@Mulperi You could use requestAnimationFrame to mimic the slideUp functionality. I will update the answer with a quick demo I've put together.

[Mulperi]

@darshanags Thanks but what I really meant was how to animate element sliding up after removing sibling element. Not sure if I explain myself well enough. So when you remove an element, slide it's siblings smoothly upwards to the place where removed element used to be.

[darshanags]

@Mulperi did you checkout the updated answer and the new fiddle I posted above? It shows you how to do a height animation using requestAnimationFrame. As for sliding up its siblings to where it was, you don't have to do anything special to make this work - the natural flow of your document will shift all following elements to take up the space that the animated element took. Have you tried doing the same? I could help with where you're stuck if you have a fiddle with your code.

[Mulperi]

@darshanags thanks for the followup, this is basically the situation what I am talking about: jsfiddle.net/mulperi/f72ozLhk/4. so when an element gets hidden or removed from the DOM, how to move the siblings with pure JS smoothly in its place.

[darshanags]

@Mulperi thanks for the fiddle. I forked it and slightly modified the code: jsfiddle.net/darshanags/4p38s1wj. As I commented above, you could use requestAnimationFrame instead of css transitions, if you prefer to use javascript only. But since you were using a class toggle technique, using css transitions seemed like the shortest path to get what you're looking for.

[Mulperi]

@darshanags thanks! That approach was on my mind too but never tried it. It's pretty simple and effective in my opinion!