jQuery Isotope Animation Delay

Question

jquery Isotopeで使用されているCSS3トランジションを変更することができれば、「transition-delay：0s、1s;」などのアイテムをどのようにシャッフルするかを遅らせることができます。

最初に左にシャッフルしてから、下に移動してフィルタリングするときに、（デフォルトの「斜めシャッフル」の代わりに）より数学的な感触を与えたいと思います。デフォルトのCSS3トランジションに加えられた変更は機能しないようです。

/**** Isotope Animating ****/ 
.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.7s; 
    -moz-transition-duration: 0.7s; 
     -o-transition-duration: 0.7s; 
      transition-duration: 0.7s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
     -o-transition-property:   top, left, opacity; 
      transition-property:   transform, opacity; 
} 

任意の入力は素晴らしいだろう：

は、ここに私の現在のCSSです！

Answer 1

は、あなたが移行している各CSSプロパティの遅延を設定することができますhttp://jsfiddle.net/desandro/QwWv7/

を参照してください。しかし、トランスフォームは1つのトランスフォームでX & Y変換で構成されているため、leftとtopの両方に別々の遅延を設定できるように、絶対/相対位置を使用する必要があります。その後、あなたはトップをtransition-property CSSを変更する必要がありますし、これらのプロパティのそれぞれについてtransition-delay値を追加し、最後に

.isotope .isotope-item { 
    /* multiple -vendor declarations omited for brevity */ 
    transition-property: left, top, opacity; 
} 

を残した設定オプションでtransformsEnabled: false

$container.isotope({ 
    itemSelector: '.item', 
    transformsEnabled: false 
}); 

とそうでください。我々はtopを遅らせるだけです。

.isotope .isotope-item { 
    transition-delay: 0s, 0.8s, 0s; 
}