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

小提琴here

更新2018年8月7日：

正如其中一位用户对使用纯JS执行slideUp功能所要求的那样，我使用requestAnimationFrame组合了一个快速演示来动画元素的高度。可以找到小提琴here。

Answer 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

Answer 3

执行此操作的一种简单方法是设置高度和边距属性的动画 - 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，同时淡出对象，从而实现平滑过渡。还可以在通知框中添加隐藏溢出，以便在动画发生时覆盖内部的任何内容。

Answer 4

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（）可能是你想要的但是

Answer 5

没有JQuery：

优先考虑var _ = require('lodash') var moment = require('moment') _.map(myMap["date"], (a) => { moment(a).format('DD MMM YYYY') }) console.log(myMap) // []：

HTML

max-width

CSS

<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>

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

5 个答案: