Can I convert with jQuery animation to CSS3 transitions/transformations with javascript fallback?

Question

Alright, here's a demo of the animation (click the word HIPSTERS in the header): http://jacksongariety.com/

It's pretty simple. Changes from 100% dimensions to 75% dimensions and goes from 0 opacity to 1 opacity. Then it reverses when you hit the X. I'm having performance issues caused by the javascript setInterval that jQuery uses to animate. I tried a number of tweaks and it looks like I'll have to use CSS3 which is way messier code that I'm not to keen on.

So, how can I convert this jQuery animation:

.animate({
        opacity: 0,
        width: '100%',
        height: '100%',
        left: '-50%',
        top: '-50%'
}, {
        duration: 200,
specialEasing: {
        opacity: 'linear',
        width: 'linear',
        height: 'linear',
        marginLeft: 'linear',
        marginTop: 'linear'
}

...into CSS3 transitions/transforms? Then have it fallback for older browsers to the slow jQuery animations?

Thanks in advance!

Use modernizr as neoascetic suggested, On my blog : http://darkyen.vacau.com I have used css transitions falling to jQuery not in the best way but the principle of them working is the same . — ShrekOverflow, Feb 19 '12 at 04:23

score 4 · Accepted Answer · answered Feb 19 '12 at 05:14

4

First of all - you will only need transitions for what you are doing. Animations are not supported as widely and anything you do with jQuery's animate() can be done with a transition (except very certain types of transitions such as elastic or bounce transitions).

I would add the transition to my CSS and then use modernizr to do feature detection in javascript.

For example my CSS might look like this (it's not exactly what you are trying to do but an example):

#lightbox {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: -50%;
  top: -50%;

    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;

  -webkit-transform: translateZ(0);
}

#lightbox.active {
  left: 0;
  top: 0;
  opacity: 1;
}

So now the default hidden state can get toggled on or off by using addClass("active"). In browsers that support CSS3 transitions this will now occur! AND for browsers without support for CSS3 transitions the element with the ID of lightbox would just appear or disappear without an animation. Also note that I added a webkit translateZ property. This is a trick to get GPU acceleration on your CSS3 transitions in Safari and Chrome. It makes a huge difference in performance, especially on iOS devices.

OK - so now how do we fallback to jquery.animate for browsers that don't support CSS3 transitions? This is where modernizr comes into play. Let's say the user clicked the close button and you now want the lightbox to fade out. You would remove the "active" class for browsers with CSS3 transitions OR use the jquery.animate method for browsers that don't support transitions:

if(Modernizr.csstransitions){
  $("#lightbox").removeClass("active");
} else {
  $("#lightbox").animate({...});
}

For more info on the property see: http://www.modernizr.com/docs/#csstransitions

answered Feb 19 '12 at 05:14

Jim Jeffers

17,572
4
41
49

I mentioned there are types of transitions that you cannot do with CSS3 transitions. For these you need to use CSS animations. I've built a javascript framework for doing just that: https://github.com/jimjeffers/Sauce – Jim Jeffers Feb 19 '12 at 05:20
Wait... no success. It just appears, it doesn't animate in. It just kinda fades in. I made a fiddle: http://jsfiddle.net/57jgZ/ – alt Feb 19 '12 at 05:51
Ah - I've answered that one before too :) http://stackoverflow.com/questions/3331353/css-3-transitions-on-the-display-property/3332179#3332179 – Jim Jeffers Feb 19 '12 at 06:00
Please respond when you get back on. Your help is much appreciated. Thanks! – alt Feb 19 '12 at 06:02
Works in the fiddle, not on my site. Odd. 1 sec. – alt Feb 19 '12 at 06:08
Oh, something in my js is applying a display:none to the #tagBox. – alt Feb 19 '12 at 06:09
Is there any way to do it without display:block on it initially? – alt Feb 19 '12 at 06:12
Did you see the work around by applying z-index: -1? You could use a setTimeout as a work around. Basically have a timeout for 100 or 250ms that sets the element to display block before applying the active class. Using a timeout would require an event listener on the end of the transition to then set it back to display none. It will be much easier if you work around this without resorting to a timeout to adjust the display property. – Jim Jeffers Feb 19 '12 at 06:17
This gives it a short delay. It should be on click. Thanks for your help! – alt Feb 19 '12 at 06:30
There is no way to do it without the delay unless you hide it by other means such as z-index: -1, height/width: 0, etc.. If you're JS is hiding it you can try overwriting it by adding a .show call in your JS: http://jsfiddle.net/jimjeffers/57jgZ/5/ then the timeout will only occur as a fallback if the element somehow got set to display: none. – Jim Jeffers Feb 19 '12 at 06:34
Performance is poor. And that's the whole reason a switched to CSS3 transitions. DAMMIT! Is there any way to improve performance? – alt Feb 19 '12 at 06:47
-webkit-transform: translateZ(0); improves performance but then I get jittery elements. – alt Feb 19 '12 at 07:02
Finally fixed it! I'm using setTimeout to call functions at every time needed. I set transformZ only during the animation. It's off before the animation and it turns off again after the animation finishes! THANKS!!!! SO MUCH!!!! – alt Feb 19 '12 at 09:14

Can I convert with jQuery animation to CSS3 transitions/transformations with javascript fallback?

1 Answers1