2

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

1 回答 1

1

首先，CSS 过渡有效。如果您打开开发工具并向.imgitem元素添加 CSS 位置（如style="position: relative, top: 20px"），您会注意到过渡效果很好！

我认为它不影响的原因dvi.gallery是因为doSort()不改变元素的实际位置。它只需要所有集合，按 ACS 排序，然后将“排序堆”放入dvi.gallery

于 2012-11-28T21:04:04.917 回答