在从DOM中删除同级元素时，创建块元素的平滑过渡 [英] Create smooth transition of block elements when removing sibling elements from DOM

问题描述

我有一个工作类似于mac os中的通知的容器 - 元素被添加到队列，并在一定的超时后删除。这工作很好，但有一个令人不安的视觉副作用。

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.

当它们从DOM中删除时，UI上的一个锯齿状的更新，因为堆栈中的下一个元素填充void由上一个元素创建。我想让下面的元素在堆栈中顺利移动到这个空间，理想情况下用css3，但添加一个转换：所有0.5s缓入到<$

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.

最小JS间断：

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

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

更好的是：

a href =http://jsfiddle.net/kMxqj/ =nofollow> http://jsfiddle.net/kMxqj/

http://jsfiddle.net/kMxqj/

我使用一个MVC框架来数据绑定这些对象，所以一些本地css / jQuery比Jq插件更受欢迎。

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

推荐答案

这应该删除点击的元素与淡出效果，然后将下面的一切顺利地移动。这将为堆栈中的任何通知 div工作，而不管它在堆栈中的位置。

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.

尝试：

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

小提琴这里

这篇关于在从DOM中删除同级元素时，创建块元素的平滑过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！