使用javascript加速CSS動畫點擊

Question

我製作了這個非常簡單的網頁，它具有居中圖像。當你點擊它時，它開始旋轉。

http://h08.us

現在我想用JavaScript來讓這個當你再次點擊它，它開始旋轉越來越快，我看了看，但我多個類似的堆棧溢出問題只是似乎沒有能夠得到這個工作：

var img = document.querySelector("#spin") 
 
img.addEventListener('click', onClick, false); 
 

 
var deg = 360; 
 

 
function onClick() { 
 

 
    deg += 90; 
 

 
    var stylesheet = document.styleSheets[0]; 
 
    var spinRule = stylesheet.cssRules[0]; 
 
    var spinRule_To = spinRule.cssRules[1]; 
 
    var spinRule_To_Style = spinRule_To.style; 
 
    spinRule_To_Style.setProperty("transform:rotate", deg); 
 
}

@keyframes spin { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
#tbl { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
#tbl td { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
img:target { 
 
    animation-name: spin; 
 
    animation-duration: 4000ms; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
}

<table id="tbl"> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <a href="#spin"> 
 
      <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS"> 
 
     </a> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

如果jquery ID允許的，試試這個。

在您的代碼中，您正在增加var deg的旋轉角度，但這不會提高速度，您需要減少每次點擊動畫的持續時間以加速動畫。

var duration = 4000; 
 
$('#spinTrigger').click(function(){ 
 
    $('#spin').css("animation-duration", duration + 'ms'); 
 
    duration -= 200; 
 
    if (duration == 0) { 
 
    duration = 100; 
 
    } 
 
})

@keyframes spin { 
 
    from { 
 
    transform: rotateZ(0deg); 
 
    } 
 
    to { 
 
    transform: rotateZ(360deg); 
 
    } 
 
} 
 
#tbl { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
#tbl td { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
img{ 
 
    width:300px; 
 
} 
 
img:target{ 
 
    animation-name: spin; 
 
    animation-duration: 4000ms; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tbl"> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <a href="#spin" id="spinTrigger"> 
 
      <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS"> 
 
     </a> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>