从 DOM 中移除兄弟元素时创建块元素的平滑过渡答案

【问题标题】：Create smooth transition of block elements when removing sibling elements from DOM从 DOM 中移除兄弟元素时创建块元素的平滑过渡
【发布时间】：2013-02-28 06:40:09
【问题描述】：

我有一个容器，其工作方式类似于 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 插件。

【问题讨论】：

标签： javascript jquery css css-transitions

【解决方案1】：

一种简单的方法是为高度和边距属性设置动画 - 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();
});

这会将高度和边距设置为 0，同时淡出对象，从而实现平滑过渡。还将溢出隐藏添加到通知框，以便在动画发生时覆盖其中的任何内容。

【讨论】：

【解决方案2】：

jQuery's Animate() method 是一个很好的学习工具，因为您不仅可以淡入淡出对象，还可以同时移动它们。

CSS：

.notice {
    position:relative;
    top:20px;
    width: 100%;
    height: 50px;
    background-color: #ccc;
    opacity:0;
}

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();
});

还有我的jsFiddle demo

【讨论】：

问题不在于对新对象进行动画处理，而是在移除 dom 时（模拟淡出），被移除元素之后的节点会跳到被移除节点创建的间隙中.

【解决方案3】：

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();
});

根据需要调整值，但这样的事情应该可以完成您想要的 - 听起来 animate() 可能是您想要的

【讨论】：

【解决方案4】：

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

试试：

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

小提琴here

2018 年 8 月 7 日更新：

正如一位用户询问有关使用纯 JS 来执行 slideUp 功能的问题，我整理了一个快速演示，使用 requestAnimationFrame 为元素的高度设置动画。小提琴可以找到here。

【讨论】：

这很好用，添加 remove() 作为对 slideUp 的回调正是我需要的——小提琴：jsfiddle.net/kMxqj/19
纯JS怎么做slideUp？
@Mulperi 您可以使用 requestAnimationFrame 来模拟 slideUp 功能。我将通过我整理的快速演示来更新答案。
@darshanags 谢谢，但我真正的意思是如何在删除兄弟元素后动画元素向上滑动。不确定我是否解释得足够好。所以当你移除一个元素时，将它的兄弟元素平滑地向上滑动到被移除元素所在的位置。
@Mulperi 感谢您的提琴。我将它分叉并稍微修改了代码：jsfiddle.net/darshanags/4p38s1wj。正如我在上面评论的那样，如果您更喜欢仅使用 javascript，则可以使用 requestAnimationFrame 而不是 css 转换。但由于您使用的是类切换技术，因此使用 css 转换似乎是获得所需内容的最短路径。

【解决方案5】：

没有 JQuery：

首选方式是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;
}

【讨论】：