jQuery同位素动画延迟

好奇的是，是否有人能够更改jquery同位素使用的CSS3转换，从而使用“转换延迟：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;
}

任何输入都将是惊人的

见

您可以为正在转换的每个CSS属性设置延迟。但由于变换在一个变换中包含X&Y平移，因此您必须退回到使用绝对/相对定位，以便您可以为

左侧

和

顶部

设置单独的延迟。使用选项中的设置

transformsEnabled:false

执行此操作

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

然后，您需要更改顶部和左侧的

transition属性

CSS

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

最后，为每个属性添加<代码>转换延迟值。我们只想延迟

top

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

看

您可以为正在转换的每个CSS属性设置延迟。但由于变换在一个变换中包含X&Y平移，因此您必须退回到使用绝对/相对定位，以便您可以为

左侧

和

顶部

设置单独的延迟。使用选项中的设置

transformsEnabled:false

执行此操作

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

然后，您需要更改顶部和左侧的

transition属性

CSS

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

最后，为每个属性添加<代码>转换延迟值。我们只想延迟

top

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