用Javascript觸發一個基本的CSS動畫

我目前正在嘗試添加一個Konami代碼，它會在我的（非常簡單的）頁面上旋轉一個div。用Javascript觸發一個基本的CSS動畫

這裏是我的代碼：

<html> 
<meta charset="UTF-8"> 
<script type="text/javascript" src="jquery.js"></script>  
<html> 
<script> 
var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65], 
n = 0; 
$(document).keydown(function (e) { 
    if (e.keyCode === k[n++]) { 
     if (n === k.length) { 
      alert('Konami working'); 
      return !1 
     } 
    } else k = 0 
}); 
</script> 
<style> 
#div1 
{ 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    -webkit-animation:spin 4s linear infinite; 
    -moz-animation:spin 4s linear infinite; 
    animation:spin 4s linear infinite; 
} 

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
</style> 
<div id="div1"><iframe frameborder="0" width="100%" height="100%" align="middle" src="//www.youtube.com/embed/_RJHLB3cBXU?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&iv_load_policy=3&playlist=_RJHLB3cBXU"></iframe></div> 
</html>

正如你所看到的，它只是引發了混亂的CSS湯指定的動畫（這完美的作品），輸入正確的代碼時。我有點絕望，有人會有想法嗎？

來源

2014-10-08 Komic

有腳本（成功的代碼序列後）一類添加到該動畫定義的股利。像'＃div1.animate'。在js中，只要成功應用這個類，就像'（'＃div1'）。addClass（'animate'）;' – kunalbhat 2014-10-08 18:25:29

你可以更具體地瞭解什麼是不工作？ '戒備'（'Konami工作'）'線是否工作？ – pquest 2014-10-08 18:26:44

是的，我的Konami的東西正在工作，沒有問題。我只是想用旋轉的觸發器替換那條線。 – Komic 2014-10-08 18:28:14

我想我在這裏得到你想要的，只要嘗試添加一個包含事件發生時動畫的類。由於我對關鍵幀不是很熟悉，我不能100％確定下面的內容會起作用，但是這個概念應該是真實的，並且讓你能夠得到答案。

$(document).keydown(function (e) { 
    if (e.keyCode === k[n++]) { 
     if (n === k.length) { 
      alert('Konami working'); 
      $('#div1').addClass('spinIt'); // <- Add this 
      return !1 
     } 
    } else k = 0 
});

CSS：

<style> 
    #div1 
    { 
     position: absolute; 
     top: 0%; 
     left: 0%; 
     width: 100%; 
     height: 100%; 

    } 
    // Add this class with the animation css and remove it from the above div1. 
    .spinIt{ 
     -webkit-animation:spin 4s linear infinite; 
     -moz-animation:spin 4s linear infinite; 
     animation:spin 4s linear infinite; 
    } 


</style>

來源

2014-10-08 18:25:52 Bradley

哦，是的，它可能會工作，我會盡快嘗試。我已經嘗試使用addClass，但我可能搞亂了我的CSS。謝謝！ – Komic 2014-10-08 18:29:05

樂意提供幫助，讓我知道它是否適合您。 – Bradley 2014-10-08 18:30:48

它的生命！非常感謝，是的，當我第一次嘗試時，我的CSS與CSS混亂了。 – Komic 2014-10-08 18:36:27

用Javascript觸發一個基本的CSS動畫

回答

相關問題