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 に答える