从DOM中删除兄弟元素时，创建块元素的平滑过渡
我有一个类似于mac os中的通知的容器 – 元素被添加到队列中并在某个超时后被删除。 这很好用，但有一个不和谐的视觉副作用。
当从DOM中删除它们时，对UI进行锯齿状更新，因为堆栈中的下一个元素填充了前一个元素创建的空白。 我希望堆栈中的下面的元素能够顺利地向上移动到那个空间，理想情况下是使用css3，但是添加了一个transition: all 0.5s ease-in-out当删除它的兄弟时，对于.notice类的transition: all 0.5s ease-in-out进入对该对象都没有影响。
最小的JS干涉：
$('#add').click(function(e) { e.preventDefault(); $('#container').append('Notice #
'); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); });
更好的是在这里摆弄：
http://jsfiddle.net/kMxqj/
我正在使用MVC框架对这些对象进行数据绑定，因此一些原生css / jQuery比Jq插件更受欢迎。
这应该删除具有淡出效果的单击元素，然后平滑地向下移动所有内容。 这适用于堆栈中的任何notice div，无论它在堆栈中的位置如何。
尝试：
$('body').on('click','p.notice', function(e) { $(this).fadeOut(500,function(){ $(this).css({"visibility":"hidden",display:'block'}).slideUp(); }); });
在这里小提琴
2018年8月7日更新：
正如一位用户对使用纯JS执行slideUpfunction所要求的那样，我使用requestAnimationFrame组合了一个快速演示来动画元素的高度。 小提琴可以在这里找到。
jQuery的Animate（）方法是一个很好的学习工具，因为你不仅可以淡入淡出你的对象，而且可以同时移动它们。
CSS：
.notice { position:relative; top:20px; width: 100%; height: 50px; background-color: #ccc; opacity:0; }
jQuery：
$('#add').click(function(e) { e.preventDefault(); $('#container').append('Notice #
'); $('.notice').animate({opacity: 1, top:0}, 1000); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); });
和我的jsFiddle演示
这样做的一个简单方法是设置高度和边距属性的动画 – http://jsfiddle.net/kMxqj/14/
$('#add').click(function(e) { e.preventDefault(); $('#container').append('Notice #
'); }); $('body').on('click','p.notice', function(e) { $(this).animate({'height':0,'margin':'0'}); $(this).fadeOut(); });
这会将高度和边距设置为0，同时淡出对象，从而实现平滑过渡。 还可以在通知框中添加隐藏的溢出，以便在动画发生时覆盖内部的任何内容。
这小提琴怎么样？
CSS
.notice { width: 0; height: 0; background-color: #ccc; }
JS
$('#add').click(function(e) { e.preventDefault(); $('#container').append('Notice #
'); $('#container p.notice:last-child').animate({ width: 100%, height: 50px }); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); });
根据需要调整值，但这样的事情应该完成你想要的 – 听起来像animate（）可能是你想要的
没有JQuery：
优选方式是max-width ：
HTML
child removable child child child
CSS
.myspan { display: inline-block; font-size: 30px; display: inline-block; max-width: 200px; transition: all 1s; overflow: hidden; } .myspan:hover { max-width: 0; }