1

好奇是否有人能够更改与 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;
}

任何输入都会很棒！

4

1 回答 1

7

见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;
}
于 2012-02-29T21:18:47.810 回答