Question

我试图通过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>

的style.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;
}

Answer 1

有两个问题。首先，你的内联Javascript中有一个拼写错误：getElementById（'ani1'）。 id上附加了“1”。

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

不正确：

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

正确：

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

如果你解决了这个问题，它应该可行; - ）

在javascript类切换后CSS3动画和动画的问题

1 个答案: