jQuery Isotope Animation Delay

Question

Curious if anyone out there has been able to change the CSS3 transitions used with jquery Isotope to add a delay to how the items shuffle using something like "transition-delay: 0s, 1s;".

I would like them to shuffle first to the left, then down, for a more mathematical type of feel when filtering (instead of the default "diagonal shuffle"). It seems that any changes made to the default css3 transitions just don't function.

Here's my current 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;
}

Any input would be amazing!

Answer 1

See http://jsfiddle.net/desandro/QwWv7/

You can set a delay for each CSS property that you are transitioning. But because transforms comprise of X & Y translation in one transform, you'll have to fall back to using absolute/relative positioning, so that you can set a separate delay for both left and top. Do so with settings transformsEnabled: false in the options

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

Then, you'll need to change the transition-property CSS for top and left

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

Finally, add transition-delay values for each of these properties. We only want to delay top.

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