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

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 框架对这些对象进行数据绑定(bind)，因此一些 native 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();
    });
});

fiddle here

2018 年 8 月 7 日更新:

正如一位用户询问的关于使用纯 JS 来实现 slideUp 功能的问题，我已经使用 requestAnimationFrame 整理了一个快速演示。为元素的高度设置动画。 fiddle 可以找到here .