jQuery的同位素动画延迟

Question

好奇，如果有任何人已经能够改变使用jQuery同位素用于添加延迟到shuffle中的项目如何使用类似的CSS3过渡“过渡延迟：0，1秒;”。

我想他们过滤（而不是默认的“对角线洗牌”）时，第一次洗牌的左边，再放下，一个更数学式的感觉。似乎对默认css3转换所做的任何更改都不起作用。

这里是我当前的CSS：

/**** 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; 
} 

任何投入将是惊人的！

Answer 1

见http://jsfiddle.net/desandro/QwWv7/

您可以为您转换每个CSS属性的延迟。但由于变换包括X & Y平移的一个转变，你就必须退回到使用绝对/相对定位，这样就可以设置两个left和top一个单独的延迟。在选项

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

与设置transformsEnabled: false这样做之后，你需要改变transition-property CSS的顶部和左侧

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

最后，添加transition-delay值每个属性。我们只想延迟top。

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