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]