从 DOM 中删除同级元素时创建块元素的平滑过渡

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

当它们从 DOM 中删除时，UI 会出现锯齿状更新，因为堆栈中的下一个元素会填充前一个元素创建的空白。我希望堆栈中下面的元素能够顺利地向上移动到该空间，最好使用 css3，但添加一个transition: all 0.5s ease-in-out to the .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/ http://jsfiddle.net/kMxqj/

我使用 MVC 框架来数据绑定这些对象，因此一些本机 css / jQuery 比 Jq 插件更受青睐。

这应该会删除具有淡出效果的单击元素，然后平滑地向上移动下面的所有内容。这适用于任何noticediv 位于堆栈中，无论其在堆栈中的位置如何。

Try:

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

Fiddle here http://jsfiddle.net/kMxqj/17/

2018 年 8 月 7 日更新：

正如一位用户询问有关使用纯 JS 来执行幻灯片功能的问题，我使用以下代码制作了一个快速演示请求动画帧 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame为元素的高度设置动画。小提琴可以找到here https://jsfiddle.net/darshanags/6uy3apwn.