0

当我通过javascript更新元素类时，我试图让动画触发。目的是让它成为 PhoneGap 应用程序的一部分，因此据我所知 -webkit- 前缀应该可以完成这项工作。

无论如何，当我在 Chrome 中测试时，动画目前无法正常工作，无论是在单独的元素上还是在新类上。任何人都可以解释我要去哪里错了吗？

索引.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;
}
4

1 回答 1

2

有两个问题。首先，您的内联 Javascript 中有一个错字：getElementById('ani1')。id 处附加了一个“1”。

第二件事是您必须删除 -webkit-animation 语句中的引号。

不正确：

-webkit-animation: 'bounce' 1s 'ease-in-out';

正确的：

-webkit-animation: bounce 1s ease-in-out;

如果你解决了这个问题，它应该可以工作;-)

于 2013-11-13T21:32:39.517 回答