Fade in element on event using CSS3 & opacity

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:

$('#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);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s