在javascript類切換后CSS3動畫和動畫的問題

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 個解決方案

解決方案1
2 已采納 2013-11-13 21:32:39

在javascript類切換后CSS3動畫和動畫的問題

問題描述

1 個解決方案

解決方案1 2 已采納 2013-11-13 21:32:39

解決方案1
2 已采納 2013-11-13 21:32:39