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

问题

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.

回答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.

回答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

回答3:

A simple way of doing this would be to animate the height and margin properties - http://jsfiddle.net/kMxqj/14/

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

$('body').on('click','p.notice', function(e) {
    $(this).animate({'height':0,'margin':'0'});
    $(this).fadeOut();
});

This will animate the height and margins to 0, while also fading out the object which results in a smooth transition. Also adding overflow hidden to your notice box so any content inside is covered as the animation happens.

回答4:

How about this fiddle

CSS

.notice {
    width: 0;
    height: 0;
    background-color: #ccc;
}

JS

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
    $('#container p.notice:last-child').animate({
        width: 100%,
        height: 50px
    });
});

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

Tweak the values as needbe, but something like this should accomplish what you'd like - it sounds like animate() might be what you want though

回答5:

No JQuery:

Preferable way is with max-width:

HTML

<div id="wrapper">        
    <div class="myspan">
        child
    </div> 
    <div id="removable" class="myspan">
        removable child
    </div>        
    <div class="myspan">
        child
    </div> 
    <div class="">
        child
    </div>
</div>

CSS

.myspan {
    display: inline-block;
    font-size: 30px;
    display: inline-block;
    max-width: 200px;
    transition: all 1s;
    overflow: hidden;
}
.myspan:hover {
    max-width: 0;
}

来源：https://stackoverflow.com/questions/15366510/create-smooth-transition-of-block-elements-when-removing-sibling-elements-from-d