CSS3轉換問題

Question

我正在使用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

Answer 1

這將做trik

$('.remove').on('click', function() { 
    $(this).parent().slideUp("slow", function(){ 
    $(this).remove(); 
    }); 
}); 

Answer 2

你不需要CSS過渡要做到這一點，請嘗試：

$('.remove').on('click', function() { 
    $(this).parent().hide(300, function(){ 
     $(this).remove(); 
    }); 
}); 

小提琴：http://jsfiddle.net/YwWn5/4/

Answer 3

這裏是你的問題的解決方案：

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

我包括margin和padding動畫，以防止元素移除任何跳躍。同樣重要的是要注意，我使用setTimeout在實際刪除元素之前等待CSS動畫完成。如果您不關心從DOM中刪除的元素，並且它們在頁面上保持不可見狀態，您可以完全刪除該部分。