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

How to call CSS animation manually with Javascript?

本文关键字：调用 CSS 动画 何使用 Javascript      更新时间：2023-09-26

我正在使用带有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*/"];
您可以通过将

过渡添加到主体并在以后添加一个类来执行此操作，该类在您选择的时间通过 jQuery 或任何其他库附加到主体的过渡来更改属性。 这里有一个简单的例子：

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

还有一个示例，该示例通过回调对不透明度进行动画处理以显示正文：

http://jsfiddle.net/tCfb5/

您只需在

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

相关文章：