CODEWITHSUNDEEP
javascriptcssuiwebview
Snowman
Snowman

Reputation: 32071

How to call CSS animation manually with Javascript?

I'm using a UIWebView with CSS animations, which animates the main body when it loads from alpha 0 to 1:

 NSString *HTML = [NSString stringWithFormat:@"<html> \n"
                      "<head> \n"
                      "<style type=\"text/css\"> \n"
                      "@-webkit-keyframes fadeIn {from {opacity: 0;-webkit-transition: opacity;}to {opacity: 1;}} \n"
                      "body {\n"
                      "-webkit-animation-name:fadeIn;\n"
                      "-webkit-animation-duration: 1.5s;\n"
                       ...

My question is, how would I call this animation manually using Javascript so that at any time, if I call the JS, the view animates from 0 to 1 (rather than just animating on load)? Or is this not possible with CSS?

Basically I want to do this: 

[mainWebView stringByEvaluatingJavaScriptFromString:@"/*animate*/"];

Upvotes: 2

Views: 3465

Answers (2)

Justin Summerlin
Justin Summerlin

Reputation: 5096

You can do this by adding the transition to the body and adding a class later that changes the property with a transition attached via jQuery or any other library to the body at your time of choosing. A simple example of this is here:

http://jsfiddle.net/Fwteu/4/

And an example that animates the opacity from a callback to show the body:

http://jsfiddle.net/tCfb5/

Upvotes: 1

Anthony Mills
Anthony Mills

Reputation: 8784

You would just set opacity: 0 in the normal CSS (through class or whatever) and then set domObject.style.opacity = 1 in the JavaScript you run on load. Animation happens any time the property changes, so you just have to change the property when you want the animation to happen.

Upvotes: 0

Related Questions