1

「transition-delay: 0s, 1s;」のようなものを使用してアイテムのシャッフル方法に遅延を追加するために、jquery Isotope で使用される CSS3 トランジションを変更できた人がいることに興味があります。

フィルタリングするときに、(デフォルトの「斜めシャッフル」ではなく) より数学的なタイプの感覚を得るために、最初に左にシャッフルしてから下にシャッフルしてほしいと思います。デフォルトの 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 プロパティごとに遅延を設定できます。ただし、変換は 1 つの変換で 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 に答える