jQuery同位素动画延迟

Question

好奇,如果那里的任何人能够改变与jquery Isotope一起使用的CSS3过渡,以使用诸如"transition-delay:0s,1s;"之类的东西来添加延迟项目.

我希望他们先向左移动,然后向下移动,以便在过滤时获得更多数学类型的感觉(而不是默认的"对角线随机播放").似乎对默认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.使用选项transformsEnabled: false中的设置执行此操作

$container.isotope({
  itemSelector: '.item',
  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;
}