percentPosition only stops transitions if transitionDuration defined

[hirasso]

Hi there, just noticed something. I want to use percentPosition to disable transitions on resize. At first it worked great (no transitions on resize), but when I removed the option transitionDuration from the script, the transitions came back. This is my code:

$(".grid").isotope({
      itemSelector: '.grid_item',
      masonry: {
        columnWidth: '.grid_sizer'
      },
      percentPosition: true
      transitionDuration: 0 // If I remove this, transitions come back
});

[desandro]

Can you provide a reduced test case? Try forking this demo http://codepen.io/desandro/pen/xGZOEV

Is this occurring in Safari? If so, this issue may be a duplicate of desandro/masonry#698

[hirasso]

Wow, you are on-line! :)
Here's my test case: http://codepen.io/hirasso/pen/qdbNRq

I think it might have something to do with the media queries? Maybe it even is a feature and not a bug ;)

[hirasso]

I can reproduce the animating betweeen different breakpoints in chrome, safari and firefox.

[desandro]

Thanks for that!

Looks like everything is working as intended. percentPosition sets item position in percent values, rather than pixel values. On window resize, the items position will scale proportionally and you shouldn't see a position. transitionDuration: 0 disables all transitions. Item positions will be set immediately with no transitions.

In your demo, you'll notice there's only a transition in position when the items' size changes due to the media query. If you want to remove this transition, you can set transitionDuration: 0.

[hirasso]

ok, thanks for clarifying.