jQuery Isotope Animation Verzögerung
Gespannt, ob jemand da draußen war in der Lage zu ändern, die CSS3-übergänge verwendet werden, mit jquery Isotope, um eine Verzögerung hinzufügen, wie die Elemente shuffle mit so etwas wie "transition-delay: 0s, 1s;".
Ich würde gerne shuffle zunächst nach Links, dann nach unten, für eine weitere mathematische Art Gefühl beim filtern (anstelle der Standard - "diagonal shuffle"). Es scheint, dass alle änderungen an den Standard-css3-übergänge, die einfach nicht Funktion.
Hier meine aktuelle 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;
}
Jede Eingabe wäre toll!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sehen http://jsfiddle.net/desandro/QwWv7/
Können Sie eine Verzögerung für jede CSS-Eigenschaft, die Sie überführen. Aber da verwandelt sich aus X & Y translation in eine zu verwandeln, müssen Sie zurückgreifen, um mit absoluter/relativer Positionierung, so dass Sie ein separates delay für beide
left
undtop
. Tun Sie dies mit EinstellungentransformsEnabled: false
in den OptionenDann müssen Sie zum ändern der
transition-property
CSS für Links und obenSchließlich, fügen Sie
transition-delay
- Werte für jede dieser Eigenschaften. Wir wollen nur die Verzögerungtop
.