Isotope animating inserts from top-left of container

For my isotope container, whenever I insert a new item into the container... it initially appears in the top-left of the container (so in the position of the first item) and then it animates by moving down into place where it should go based on sorts.

Here is an example of what I would like to happen though: http://jsfiddle.net/aaairc/H4ZMV/5/. As you see in that example, the new item zooms in starting from the position that it is going to take within the container.

I haven't been able to replicate the issue I'm seeing locally on jsfiddle yet, but I thought someone 开发者_Go百科might have an initial suggestion or point me to what in my jsfiddle example is actually enabling the insert to have the nice zoom in functionality. Is that just default? Something related to the CSS?

Also, not sure if this is relevant, but the container items of my isotope instance or all jpgs.

It had to do with how you specify the CSS. When I changed my CSS over to this it worked how I expected would like.

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}

This feature has been built into Isotope v1.4. See Metafizzy blog: Isotope v1.4 - refined inserting animation