js觸發css動畫,可以重復觸發


寫好動畫,但不在需要動畫的元素上綁定animation屬性,事件觸發的時候綁上,事件結束后再刪除掉,下次點擊就能重新綁上,重現動畫效果

CSS代碼:

  寫好動畫效果(閃爍)

myFirst{
  0%{color:red;}      
  25%{color:yellow;}    
  50%{color:red;}
  100%{color:yellow;}             
}

JS代碼:

  

$("觸發事件的標簽").oncllick = function(){

     //給要啟用動畫的標簽綁定設置好的css動畫        
     $("要展示效果的標簽").style.animation = "myFirst"

    //展示完成后,刪除綁定的動畫,以便可以下次觸發的時候可以再次顯示動畫效果
    $("要展示效果的標簽").style.display;   (或者刪除style)
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM