Question

我正在使用jQuery对div进行排序，并希望将css3过渡动画应用于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>

Answer 1

首先，CSS转换工作。如果您打开开发工具并将.imgitem元素添加到CSS位置（例如style="position: relative, top: 20px"），您会发现转换运行良好！

我认为它不会影响dvi.gallery的原因是因为doSort()不会改变元素的实际位置。它只需要所有的集合，由ACS进行排序，然后将'sorted heap'放入dvi.gallery

使用CSS3动画jQuery排序的div

1 个答案: