我试图在通过 javascript 更新元素类时触发动画。目的是让它成为 PhoneGap 应用程序的一部分，因此据我所知，-webkit- 前缀应该可以完成这项工作。
无论如何，当我在 Chrome 中进行测试时，无论是单独在元素上还是在新类上，动画目前都不起作用。谁能解释我哪里出错了？
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSockets</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
Start
</a>
<div id="ani"></div>
</body>
</html>
样式.css
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(50px);
}
20%, 60% {
-webkit-transform: translateY(70px);
}
80%, 40% {
-webkit-transform: translateY(30px);
}
}
#ani {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background: red;
-webkit-transform: all 0.1s;
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
-webkit-animation-delay: 2s;
}
#ani.bounce{
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
}
#ani.fade{
-webkit-transition: opacity 0.4s linear;
-webkit-animation-delay: 3s;
}
最佳答案
有两个问题。首先，您的内联 Javascript 中有一个拼写错误:getElementById('ani1')。在 id 后面附加了一个“1”。
第二件事是您必须删除 -webkit-animation 语句中的引号。
不正确:
-webkit-animation: 'bounce' 1s 'ease-in-out';
正确:
-webkit-animation: bounce 1s ease-in-out;
如果你修复了它，它应该可以工作 ;-)
关于javascript - JavaScript 类切换后的 CSS3 动画和动画问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19964404/