Question

我正在使用带有CSS动画的UIWebView，当它从alpha 0加载到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"
                       ...

我的问题是，如何使用Javascript手动调用此动画，以便在任何时候，如果我调用JS，视图的动画从0到1（而不仅仅是加载动画）？或者这对CSS不可能吗？

基本上我想这样做：

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

Answer 1

您可以通过向主体添加转换并稍后添加一个类来执行此操作，该类在您选择时通过jQuery或任何其他库附加的转换更改属性。一个简单的例子就是：

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

这是一个动画来自回调的不透明度以显示正文的示例：

http://jsfiddle.net/tCfb5/

Answer 2

您只需在普通CSS（通过类或其他）中设置opacity: 0，然后在加载时运行的JavaScript中设置domObject.style.opacity = 1。动画会在属性更改时发生，因此您只需在想要动画发生时更改属性。

如何使用Javascript手动调用CSS动画？

2 个答案: