javascript 从 DOM 中删除兄弟元素时创建块元素的平滑过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15366510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create smooth transition of block elements when removing sibling elements from DOM
提问by jarmie
I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect.
我有一个容器，它的工作方式类似于 mac os 中的通知 - 元素被添加到队列中并在特定超时后删除。这很好用，但有一个不和谐的视觉副作用。
When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a transition: all 0.5s ease-in-outto the .noticeclass had no effect on the object when its sibling was remove.
当它们从 DOM 中移除时，UI 会出现锯齿状更新，因为堆栈中的下一个元素会填充由前一个元素创建的空白。我希望堆栈中下面的元素能够平滑地向上移动到该空间，理想情况下使用 css3，但是在删除其兄弟时transition: all 0.5s ease-in-out，向.notice类添加 a对对象没有影响。
Minimal JS interpertation :
最小的 JS 解释：
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Better yet fiddle here :
更好的是在这里摆弄：
I'm using a MVC framework to data-bind these objects so some native css / jQuery is preferred over a Jq plugin.
我正在使用 MVC 框架对这些对象进行数据绑定，因此某些本机 css/jQuery 比 Jq 插件更受欢迎。
回答by darshanags
This should remove the clicked element with a fade out effect and then move everything below up smoothly. This will work for any noticediv in the stack regardless of it position within the stack.
这应该删除具有淡出效果的点击元素，然后平滑地向上移动下面的所有内容。这将适用notice于堆栈中的任何div，无论它在堆栈中的位置如何。
Try:
尝试：
$('body').on('click','p.notice', function(e) {
$(this).fadeOut(500,function(){
$(this).css({"visibility":"hidden",display:'block'}).slideUp();
});
});
Fiddle here
在这里摆弄
Update August 7th, 2018:
2018 年 8 月 7 日更新：
As asked by one of the users about using pure JS to do the slideUp functionality, I've put together a quick demo using requestAnimationFrameto animate the height of an element. Fiddle can be found here.
正如一位用户询问有关使用纯 JS 来执行 slideUp 功能的问题，我整理了一个使用requestAnimationFrame为元素的高度设置动画的快速演示。小提琴可以在这里找到。
回答by klewis
jQuery's Animate() methodis a great tool to learn because not only can you fade your objects in and out, but you can move them around, all at the same time.
jQuery 的 Animate() 方法是一个很好的学习工具，因为您不仅可以淡入淡出对象，还可以同时移动它们。
The CSS:
CSS：
.notice {
position:relative;
top:20px;
width: 100%;
height: 50px;
background-color: #ccc;
opacity:0;
}
The jQuery:
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();
});
And my jsFiddle demo
还有我的jsFiddle 演示
回答by BahamutWC
How about this fiddle
这个小提琴怎么样
CSS
CSS
.notice {
width: 0;
height: 0;
background-color: #ccc;
}
JS
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();
});
Tweak the values as needbe, but something like this should accomplish what you'd like - it sounds like animate() might be what you want though
根据需要调整值，但是这样的事情应该可以完成您想要的 - 听起来 animate() 可能是您想要的
回答by Drew Dahlman
A simple way of doing this would be to animate the height and margin properties - http://jsfiddle.net/kMxqj/14/
一种简单的方法是为高度和边距属性设置动画 - 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();
});
This will animate the height and margins to 0, while also fading out the object which results in a smooth transition. Also adding overflow hidden to your notice box so any content inside is covered as the animation happens.
这将使高度和边距动画化为 0，同时也会使对象淡出，从而实现平滑过渡。还将溢出隐藏到您的通知框中，以便在动画发生时覆盖其中的任何内容。
回答by nikk wong
No JQuery:
没有 JQuery：
Preferable way is with max-width:
最好的方法是max-width：
HTML
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
CSS
.myspan {
display: inline-block;
font-size: 30px;
display: inline-block;
max-width: 200px;
transition: all 1s;
overflow: hidden;
}
.myspan:hover {
max-width: 0;
}
