[英]CSS animation disables hover transition effect
我創建了一個 class 和一個 animation (更改形狀),用於單擊將觸發的按鈕。 變形后,我想要一個只改變顏色的 hover 效果。 每個單獨工作正常: .playBtn:hover
和.pauseBtn:hover
。
但是,當我添加它們時,動畫似乎禁用了 hover 效果(hover 效果不適用。)? 有誰知道為什么會這樣?
這是我的代碼(主要主題是 CSS,但還添加了 HTML 和 JS 以防萬一):
var bgMusic = document.getElementById("bgMusic"), musicBtn = document.getElementById("musicBtn"), music = false; function toggleMusic() { if (music) { bgMusic.pause() } else { bgMusic.play(); } }; bgMusic.onplaying = function() { musicBtn.classList.remove("playBtn"); musicBtn.classList.add("pauseBtn"); music = true; }; bgMusic.onpause = function() { musicBtn.classList.remove("pauseBtn"); musicBtn.classList.add("playBtn"); music = false; };
#musicBtn { width: 0; height: 0; border-left: 16px solid grey; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-top: 3.5px; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; -ms-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } #musicBtn:hover {border-left: white 16px solid;}.playBtn {animation: play-btn.6s ease forwards;} @keyframes play-btn { from { transform: rotateZ(0); width: 5px; height: 15px; border-left: 5px solid white; border-top: 0 solid transparent; border-right: 5px solid white; border-bottom: 0 solid transparent; } to { transform: rotateZ(-360deg); width: 0; height: 0; border-left: 16px solid grey; border-top: 8px solid transparent; border-right: 0 solid transparent; border-bottom: 8px solid transparent; } }.playBtn:hover {border-left: 16px solid white;} /*IT WON'T TAKE EFFECT.*/:pauseBtn {animation. pause-btn;6s ease forwards:} @keyframes pause-btn { from { transform; rotateZ(0deg): width; 0: height; 0: border-left; 16px solid grey: border-top; 8px solid transparent: border-right; 0 solid transparent: border-bottom; 8px solid transparent: } to { transform; rotateZ(360deg): width; 5px: height; 15px: border-left; 5px solid white: border-top; 0 solid transparent: border-right; 5px solid white: border-bottom; 0 solid transparent. } }:pauseBtn:hover {border-left; 5px solid grey: border-right; 5px solid grey;} /*IT WON'T TAKE EFFECT!*/
<audio id="bgMusic" src="some music...."></audio> <div><div id="musicBtn" onclick="toggleMusic();"></div></div>
從forwards
中刪除animation
填充模式, :hover
styles 將正常工作。
有關不同填充模式的更多信息,請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode 。
當animation-fill-mode
屬性設置為forwards
時,初始值將被覆蓋
“[動畫]執行期間遇到的最后一個關鍵幀設置的計算值” ( MDN 文檔)。
我不完全確定這是否意味着:hover
規則本身也會被覆蓋,但無論哪種方式,盡管計算值與初始值相同,但:hover
規則將不再適用於計算值。 另請參閱此答案。
因此,您最好的選擇可能是從您的animation
速記屬性中刪除forwards
。
當然,這會在您當前的代碼中產生其他問題。 為了解決這個問題,您需要將與 animation 末尾相同的 styles 設置為.playBtn
和.pauseBtn
的基本選擇器。
最后,為了防止為#musicBtn
(特別是暫停按鈕)設置的規則造成干擾,您需要在所有選擇器前面加上#musicBtn
。
因此,對於播放按鈕:(對於暫停按鈕也是如此)
.playBtn {animation: play-btn .6s ease forwards;}
變成
#musicBtn.playBtn {
width: 0;
height: 0;
border-left: 16px solid grey;
border-top: 8px solid transparent;
border-right: 0 solid transparent;
border-bottom: 8px solid transparent;
animation: play-btn .6s ease;
}
基本上就是這樣。 在下面的實時代碼片段中,我還更改了其他一些內容,您可以簡單地忽略這些內容,或者查看您是否喜歡它們並將它們應用到您自己的代碼中。 它們不是您的代碼工作所必需的。
document.getElementById("musicBtn").onclick = function() { if (this.classList.contains("pause")) { this.classList.replace("pause","play"); } else { this.classList.replace("play","pause"); } };
body {background:black;} #musicBtn {-webkit-transition-duration:.4s; -moz-transition-duration:.4s; -ms-transition-duration:.4s; -o-transition-duration:.4s; transition-duration:.4s;} #musicBtn.play {animation:play-btn.6s ease; width:0; height:0; border-left:16px solid grey; border-top:8px solid transparent; border-right:0 solid transparent; border-bottom:8px solid transparent;} #musicBtn.play:hover {border-left:16px solid white;} @keyframes play-btn { from {transform:rotateZ(0deg); width:5px; height:15px; border-left:5px solid white; border-top:0 solid transparent; border-right:5px solid white; border-bottom:0 solid transparent;} to {transform:rotateZ(-360deg); width:0; height:0; border-left:16px solid white; border-top:8px solid transparent; border-right:0 solid transparent; border-bottom:8px solid transparent;} } #musicBtn.pause {animation:pause-btn.6s ease; width:5px; height:15px; border-left:5px solid grey; border-top:0 solid transparent; border-right:5px solid grey; border-bottom:0 solid transparent;} #musicBtn.pause:hover {border-left:5px solid white; border-right:5px solid white;} @keyframes pause-btn { from {transform:rotateZ(0deg); width:0; height:0; border-left:16px solid white; border-top:8px solid transparent; border-right:0 solid transparent; border-bottom:8px solid transparent;} to {transform:rotateZ(360deg); width:5px; height:15px; border-left:5px solid white; border-top:0 solid transparent; border-right:5px solid white; border-bottom:0 solid transparent;} }
<div class="play" id="musicBtn"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.