是否可以僅在單擊按鈕時觸發動畫而不使用使用 css 或 scss 的 javascript

Question

我只想在沒有使用 css 或 scss 的 JavaScript 的情況下單擊按鈕時觸發動畫。

我嘗試使用：active，但即使在頁面加載后也會觸發動畫。

我認為 JavaScript 可能會解決這個問題，但我想知道是否可以僅使用 css 或 scss 來解決它。

 #clickMe:active{ animation: rotateAnimation 2s linear; } @keyframes rotateAnimation { from{transform:rotate(0deg);} to{transform:rotate(365deg);} }

 <body> <button id="clickMe">Click Me</button> </body>

Answer 1

使用 :active 選擇器無法實現整個旋轉，因為按鈕僅在您單擊后短時間內處於活動狀態。

在這種情況下使用 JavaScript 更有意義，因為它會觸發點擊事件的動畫，而不是元素的 :active 狀態。

但是，如果您真的只想通過 CSS 實現這一點，則可以使用輸入復選框。 首先像按鈕一樣設計它。 然后，使用 :checked 選擇器為其設置 CSS 動畫。 同樣，最好選擇一種有意義的方法，因為保持代碼可讀性對於開發人員來說至關重要。

Answer 2

您可以使用:focus來實現相同的目的。 試試這個：

 #clickMe:focus{ animation: rotateAnimation 2s linear; } @keyframes rotateAnimation { from{transform:rotate(0deg);} to{transform:rotate(365deg);} }

 <body> <button id="clickMe">Click Me</button> </body>