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

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

javascript css

如何使用Javascript手动调用CSS动画？,javascript,css,uiwebview,Javascript,Css,Uiwebview,我使用的是带有CSS动画的UIWebView，它在从alpha 0加载到1时为主体设置动画： NSString *HTML = [NSString stringWithFormat:@"<html> \n" "<head> \n" "<style type=\"text/css\"> \n" "@-webkit-keyframe

我使用的是带有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"
                       ...

您只需在普通CSS中设置

opacity:0

（通过类或其他方式），然后在加载时运行的JavaScript中设置

domObject.style.opacity=1

。属性更改时会发生动画，因此您只需在希望动画发生时更改属性。

您可以通过将转换添加到主体，然后添加一个类来更改属性，并在选择时通过jQuery或任何其他库将转换附加到主体。下面是一个简单的例子：

以及一个示例，该示例通过回调设置不透明度动画以显示身体：

我认为您的问题更多的是“如何在Javascript中调用CSS”的问题。我想，我要么使用将CSS内容附加到头部的函数，要么使用Javascript框架（如jQuery）。我正在这样做，但什么都没有发生：

[mainWebView stringByEvaluatingJavaScriptFromString:@“document.getElementById（\'main\”）.style.opacity=1”好，我正在使用document.body.style.opacity=1.0，它可以工作，但没有动画..我尝试将opacity:0放入白色，但它不再有动画。为什么？因为你还没有在不透明度上设置过渡。请看第二个例子，现在我如何用Javascript字符串添加它？
[mainWebView stringByEvaluatingJavaScriptFromString:@"/*animate*/"];