Adding CSS transition effects to flexible example breaks the layout ( a bit )

[kenOfYugen]

First of all, great work :+1:

I haven't looked into it enough to find the cause and fix it, but as I was experimenting with the flexible example, I found out that when I applied the CSS transition effects from the fade example, the layout's upper and lower margins of every image would sometimes disappear, making the images meet, or get too large.

Just wanted to report this issue in case it is known and easily fixable.

To replicate it:

1. Add CSS transition effects e.g:

   tiles li {

   -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wookmark-placeholder { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

2. Resize the browser's window. When used on a mobile device, depending the resolution pictures may be overlapping or be too far apart.

[Sebobo]

Hi,

thanks!

When using transitions the browser returns the width and height of an item in it's current state of animation. This can be anything which is currently a problem. It was not important enough for me to try to find a fix yet. If you come up with something, I would be glad to integrate it into the plugin.

Regards

[actionfiguredatabase]

Hi all,

I think I may have found a simple solution to this issue: add and remove a class that turns transitions off. Here we go...

tiles li {

-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

tiles.stateless li {

-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }

jQuery: $('#tiles').addClass('stateless'); $handler.wookmark(options); $('#tiles').removeClass('stateless');

That should do the trick. Testing in Chrome, FF, IE8 - 11 (though of course no transition anyway in 8 and 9).

[slightlyfaulty]

@actionfiguredatabase This doesn't solve the issue of transitions causing spacing issues when actively resizing the window, unless you turn off transitions altogether when resizing.

A much more transition-friendly solution is to add the following after initiating Wookmark:

setInterval(function() {
    $handler.trigger('refreshWookmark');
}, 150);

Note that the interval delay is half of the transition duration. This allows for a seamless animation while resizing the window. Be careful not to set this value too low though as you may end up causing performance issues on slower devices.