Isotope filtering with CSS transitions - fade only

问题

I'm trying to deactivate the css transitions of the height and width of items when filtered out using isotope. So, just having items fade out or in, and move about - no scaling.

I've tried all kinds of css modification to the standard css transitions: http://isotope.metafizzy.co/docs/animating.html#css_transitions , but no success.

Is this possible without modifications to the plugin?

Here's a demo of what I have at the moment: http://codepen.io/2kp/pen/nAGkp

回答1:

$('#container').isotope({
      hiddenStyle: {
        opacity: 0
      },
      visibleStyle: {
        opacity: 1
      }
})

回答2:

I ended up taking the route of modifying the plugin itself (by removing transform:"scale(0.001)" and transform:"scale(1)") since overriding the hiddenStyle and visibleStyle objects wasn't working (as suggested by the Isotope documentation http://isotope.metafizzy.co/options.html#visiblestyle).

Hope that helps! Seems like a bug in the plugin.

回答3:

Just trying to do something similar, animating only opacity + height, not the width and think on my way I found a solution that works for you - at least I hope so!

Just add this to your JS:

$('#container').isotope({
    // options...
    transformsEnabled: false
});

and change CSS to:

.isotope .isotope-item {
  -webkit-transition-property: top, left, opacity;
     -moz-transition-property: top, left, opacity;
      -ms-transition-property: top, left, opacity;
       -o-transition-property: top, left, opacity;
          transition-property: top, left, opacity;
}

来源：https://stackoverflow.com/questions/18367231/isotope-filtering-with-css-transitions-fade-only

标签

jquery-isotope