Geek Answers Handbook

Using CSS animation in javascript calculation

I am developing a web application that needs to create and evaluate many arrays at startup. I would like to show the download page while this is happening, and maybe play a little with the css animation, but it seems that the CSS animation will hang while javascript is running. I already have a loading panel that updates on key processing events, but I would like to use css transitions to smooth it out a bit.

I was wondering if there is a way to allow something to come to life during javascript execution?

I know that I can give control to the browser from time to time to keep it updated, but I find it stupid that calculating something in the background using javascript will just freeze the whole interface.

EDIT: Here is a stupid example of what I'm talking about: http://jsfiddle.net/YWefx/13/ If you turn off css transitions, the panel is updated at each iteration, but if you turn it on, the transition will happen only at the very end. Thus, I have to either wait 400 ms between each cycle, losing 4 seconds, doing nothing but animations, having smooth animation at the end (losing the benefits of displaying a progress bar) or not animating the panel.

+5
source share
1 answer

CSS3 animations are not blocked by Javascript unless heavy processing occurs (in which case you may get a stutter).

If you run them at boot time, I see that they are delayed until they get to this part of the script.

One way is to setTimeouts at the very beginning of the script to trigger animation changes at a specific time.

Another (possibly best) option would be to use keyframes. Be sure to call this before starting the download. http://dev.w3.org/csswg/css3-animations/#keyframes

+2
source

More articles:


All Articles