CSS3过渡问题
CSS3过渡问题
提问于 2014-07-22 22:50:01
我使用jquery删除了一堆div元素。我想要的是当div被移除时，其余的div元素应该动画到顶部。我当前的代码只是删除了它，其余的div元素会立即转移。我如何才能做到这一点？
下面是我的代码
HTML
<div class="div"><a href="#" class="remove">Remove</a></div>
<div class="div"><a href="#" class="remove">Remove</a></div>
<div class="div"><a href="#" class="remove">Remove</a></div>
<div class="div"><a href="#" class="remove">Remove</a></div>JS
$('.remove').on('click', function () {
$(this).parent().remove();
});CSS
.div {
padding: 20px;
margin-bottom: 20px;
background: #ccc;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;
}JSFIDDLE
回答 3
Stack Overflow用户
发布于 2014-07-22 22:55:46
这将完成trik
$('.remove').on('click', function () {
$(this).parent().slideUp("slow", function(){
$(this).remove();
});
});Stack Overflow用户
发布于 2014-07-22 23:01:18
以下是针对您的问题的解决方案：
http://jsfiddle.net/YwWn5/3/
更新JS：
$('.remove').on('click', function () {
var $elem = $(this).parent();
$elem.addClass('removing');
setTimeout(function () {
$elem.remove();
}, 500);
});更新的CSS：
.div {
padding: 20px;
margin-bottom: 20px;
background: #ccc;
transition: width 2s, height 0.5s, opacity 0.5s, margin 0.5s, padding 0.5s;
}
.removing {
height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}我包含了页边距和填充动画，以防止在删除元素时出现任何跳跃。同样重要的是要注意，在实际删除元素之前，我使用setTimeout等待CSS动画完成。如果您不关心从DOM中删除的元素，并且可以接受它们在页面上保持不可见，则可以完全删除该部分。
Stack Overflow用户
发布于 2014-07-22 23:00:39
你不需要CSS转换就能做到这一点，试试：
$('.remove').on('click', function () {
$(this).parent().hide(300, function(){
$(this).remove();
});
});小提琴：http://jsfiddle.net/YwWn5/4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24890636
复制相关文章
相似问题
腾讯云开发者
