用CSS3動畫jQuery排序的div

我用jQuery對div進行排序，並希望將css3過渡動畫應用於div位置轉換。用CSS3動畫jQuery排序的div

不幸的是，CSS3過渡動畫不能正常工作，我試圖找出原因：

這裏是一個工作示例：jsFiddle

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Test</title> 
<link rel='stylesheet' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' type='text/css' media='screen' /> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
<script type='text/javascript' src='http://code.jquery.com/ui/1.9.2/jquery-ui.js'></script> 
<style> 
.gallery { 
    background-color: black; 
} 

.imgitem { 
    width: 40px; 
    height: 40px; 
    background-color: blue; 
    margin-bottom: 10px; 
    overflow: hidden; 
    background-color: blue; 
    position: relative; 
} 

.imgitem { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 
</style> 
</head> 
<body> 
<button id="chrank">Sort</button> 
<div class="gallery"> 
    <div class="imgitem" style="background-color: red;"><div class="pop">6</div></div> 
    <div class="imgitem" style="background-color: blue;"><div class="pop">4</div></div> 
    <div class="imgitem" style="background-color: green;"><div class="pop">8</div></div> 
    <div class="imgitem" style="background-color: brown;"><div class="pop">1</div></div> 
    <div class="imgitem" style="background-color: magenta;"><div class="pop">3</div></div> 
    <div class="imgitem" style="background-color: grey;"><div class="pop">5</div></div> 
    <div class="imgitem" style="background-color: pink;"><div class="pop">4</div></div> 
    <div class="imgitem" style="background-color: navy;"><div class="pop">7</div></div> 
    <div class="imgitem" style="background-color: yellow;"><div class="pop">9</div></div> 
</div> 

<script> 
    $('.gallery').sortable({ disable: true }); 

    function doSort() 
    { 
     $('.gallery').sortable({ disable: true }); 
     $('.gallery').sortable('refresh'); 
     $('.gallery .imgitem').sort(sortAscending).appendTo('.gallery'); 
    } 

    function sortAscending(a, b) { 
     return $(a).find(".pop").text() > $(b).find(".pop").text() ? 1 : -1; 
    }; 

    $("#chrank").live("click", function(){ 
     doSort(); 
    }); 
</script> 

</body> 
</html>

來源

2012-11-28 user1810414

首先，CSS過渡工作。如果你打開開發工具，並添加到一個CSS位置（如style="position: relative, top: 20px"）的.imgitem元素，你會注意到轉換工作正常！

我認爲它不影響dvi.gallery的原因是因爲doSort()不改變元素的實際位置。它只需要所有的收集，全部由ACS排序，然後把'排序的堆'納入dvi.gallery

來源

2012-11-28 21:04:04

您是對的，腳本將收集，排序並將其放回父div。我的期望是，這仍然應該導致動畫，因爲DOM元素的物理位置正在改變。我能做些什麼來與動畫一起整理工作？ – user1810414

@ user1810414我認爲爲了讓CSS動畫效果很好，你應該使用CSS位置屬性（top; right，left，bottom，margin等等）所以你需要（重新）計算CSS位置JS並將其應用於每個'.imgitem' .... **但是**它認爲它不會進行實際的排序。 **屏幕上元素**的位置將*排序*，但不是DOM中元素的實際位置 –

回答

相關問題