I’m working on a project, that requires a number of different animations based on user events. I recently switched all of the animations to CSS3 transforms and transitions versus jQuery animations. The improvement has been staggering, to say the least.
However, I came across a weird issue today. When attempting to fade an element in after a click event, the element just kept popping into place. It wouldn’t fade. After some investigation I realized that my jQuery was setting the opacity to 1.0 instantly, more or less, when the transition style was applied as well.
By triggering a 1ms delay, the fade instantly started to work! So what I did was, add a class of “offscreen-fade” which has the opacity initially set to 0 and contains the necessary transform and transitions styles. Then, after the click event I used jQuery to set the css() for the item’s opacity to 1. However, I needed to make sure I didnt set the “offscreen-fade” class AND css in the same chained call. I needed to delay it by at least 1 ms. Seems silly and stupid, but it worked. Heres the final code I used:
[sourcecode lang=”javascript”]
$(‘#container-transitional’)
.addClass(‘offscreen-fade’)
.css(‘transition’, ‘opacity ‘ + (App.settings.transitionSpeed / 1000 + ‘s’) + ‘ ease-in-out’);
$(‘#container-transitional’).html(obj).show();
var t = setTimeout(function () { $(‘#container-transitional’).css(‘opacity’,’1.0′) }, 1);
[/sourcecode]