如何在我的情況下啓動一個CSS動畫？

Question

我想用javascript在我的應用程序中啓動一個css動畫。

我有這樣的事情。

#ball{ 
position:absolute; 
animation-name:myfirst; 
animation-duration:5s; 
animation-timing-function:linear; 

animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
-webkit-animation-name:myfirst; 
-webkit-animation-duration:2s; 
-webkit-animation-timing-function:linear; 

-webkit-animation-iteration-count:1; 
-webkit-animation-direction:default; 
-webkit-animation-play-state:running; 
} 


.stage2{ 
position:absolute; 
animation-name:mySecond; 
animation-duration:5s; 
animation-timing-function:linear; 

animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
-webkit-animation-name:myfirst; 
-webkit-animation-duration:2s; 
-webkit-animation-timing-function:linear; 

-webkit-animation-iteration-count:1; 
-webkit-animation-direction:default; 
-webkit-animation-play-state:running; 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {left:2%; top:47%;} 
20% {left:16%; top:47%;} 
40% {left:16%; top:58%;} 
60% {left:-10%; top:58%;} 
80% {left:-10%; top:67%;} 
100% {left:12%; top:67%;} 
} 

@-webkit-keyframes mySecond /* Safari and Chrome */ 
{ 
0% {background:red; left:2%; top:25%;} 
20% {background:yellow; left:16%; top:25%;} 
40% {background:blue; left:16%; top:35%;} 
60% {background:green; left:0; top:35%;} 
80% {background:red; left:0; top:45%;} 
100% {background:red; left:12%; top:45%;} 
} 

HTML

<img id='ball' src='test.png' /> 
<a href='#' >click </a> 

我想要當用戶點擊一個按鈕，我開始IMG另一個動畫。

JS

$('#ball').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd  
    msanimationend',function(){ 
      //first animation ended // works perfect 
      $(this).hide() 
}) 

$('a').on('click', function(){ 
    $('#ball').show().addClass('stage2') 
}) 

這似乎並沒有工作。任何人都可以幫助我嗎？非常感謝！

Answer 1

如果上述腳本是您所擁有的副本，那麼存在與行終止相關的語法錯誤。如果沒有適當的字符串終止，您將在oAnimationEnd之後出現換行符。

除此之外，它看起來不錯

jQuery(function() { 
    $('#ball').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend', function() { 
     //first animation ended // works perfect 
     $(this).hide() 
    }) 

    $('a').on('click', function() { 
     $('#ball').show().addClass('stage2') 
    }) 
}) 

演示：Fiddle

Answer 2

這是一個CSS問題。元素.stage2具有以下屬性：

-webkit-animation-name:myfirst; 

這是錯誤的，因爲你使用同樣的動畫名稱都動畫。

它應該是：

-webkit-animation-name:mySecond; 

從

除此之外，最好使用動畫速記：

#ball { 
    position:absolute; 
    padding:10px; 
    -webkit-animation:myfirst 2s linear 1; 
} 
#ball.stage2 { 
    -webkit-animation:mySecond 2s linear 1; 
} 

（你還應該添加前綴和@keyframes比-webkit其他瀏覽器）

除了這些錯誤，還有一個特殊的衝突，因爲第一個動畫會無限播放並覆蓋s添加類時的第二個動畫。我通過在第二個選擇器#ball.stage2上添加一個id來解決這個問題 - 因此使它更具體。這將現在導致它在添加類時覆蓋第一個動畫。

另外，由於Arun P Johny points out，jQuery中也存在換行符。刪除，並修復JS問題，它應該工作。

UPDATED EXAMPLE HERE - （-webkit唯一的 - 我還沒有添加其他前綴）

你可以告訴第二個動畫工作，因爲背景顏色現在改變。