从DOM中删除兄弟元素时,创建块元素的平滑过渡

Question

我有一个类似于mac os中的通知的容器 - 元素被添加到队列中并在特定超时后被删除.这很好用,但有一个不和谐的视觉副作用.

当它们从DOM中移除时,对UI进行锯齿状更新,因为堆栈中的下一个元素填充了前一个元素创建的空白.我希望堆栈中的下面的元素能够顺利地向上移动到那个空间,理想情况下是使用css3,但是当删除它的兄弟时transition: all 0.5s ease-in-out,向.notice该类添加一个对该对象没有影响.

最小的JS干涉:

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

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

更好的是在这里摆弄:

http://jsfiddle.net/kMxqj/

我正在使用MVC框架对这些对象进行数据绑定,因此一些原生css/jQuery比Jq插件更受欢迎.

Answer 1

这应该删除具有淡出效果的单击元素,然后平滑地向下移动所有内容.这适用notice于堆栈中的任何div,无论它在堆栈中的位置如何.

尝试:

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

在这里小提琴

2018年8月7日更新:

正如其中一位用户要求使用纯JS来执行slideUp功能一样,我已经使用requestAnimationFrame组合了一个快速演示来动画元素的高度.小提琴可以在这里找到.