如何暂停所有CSS动画并在需要时恢复
[英]How do I pause ALL CSS animations and resume when needed
问题描述
我正在制作一个在按下“播放”按钮时播放我们学校颂歌的网站，并在按下“暂停”时暂停。 旁边还有歌词的突出动画“每行”。 但是，我无法全局暂停动画。 我想暂停音频和CSS动画，但是只有音频才是实际暂停的音频，因此当我单击“播放”按钮时，歌词高亮显示和音频不再同步。
我已经尝试过在CSS中使用animation-play-state进行播放，但是都没有效果很好
如果代码很长，很抱歉，因为我做了“每行”歌词，但是我想做的是暂停所有动画，以便每当我恢复音频时它仍与音频保持同步。
.lyrics { font-weight: lighter; font-size: 1vw; } .l1.an { animation: tae 1s; animation-direction: alternate; animation-duration: 5s; animation-delay: 12s; } .l2.an { animation: tae 1s; animation-duration: 5s; animation-fill-mode: alternate; animation-delay: 15s; } .l3.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 18s; } .l4.an { animation: tae 1s; animation-duration: 7s; animation-fill-mode: alternate; animation-delay: 24s; } .l5.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 29s; } @keyframes tae { 0% {background: initial;} 30% {background: blue;} 60% {background: blue;} 100% {background: initial;} }
<body> <audio id="ad"> <source src = "pup.mp3" type="audio/mp3"> </audio> <script type="text/javascript"> var song = document.getElementById("ad"); function togglePlay() { song.play(); document.getElementByClassName("an").style.animationPlayState = "running"; //this is what I'm currently using in play button } function togglePause() { song.pause(); document.getElementByClassName("an").style.animationPlayState = "paused"; //this is for the pause button } </script> <div class="bg"></div> <div class="bg-box"> <img src="PUPLogo.png"> <p class="PUP">Polytechnic University of the Philippines</p> <h1>PUP HYMN</h1> <p class="lyrics"> <div class="l1 an">Sintang Paaralan</div> <div class="l2 an">Tanglaw ka ng bayan</div> <div class="l3 an">Pandayan ng isip ng kabataan</div> <div class="l4 an">Kami ay dumating nang salat sa yaman<br></div> <div class="l5 an">Hanap na dunong ay iyong alay<br></div> <!--I cut the lyrics here to make it shorter--> <input type="button" value="Play" onclick="togglePlay()" class="but" ></input> <input type="button" value="Pause" onclick="togglePause()" class="but"></input> </div> </body> </html>
2 个解决方案
解决方案1
2 2019-01-10 08:09:50
首先，有一种类型需要使用getElementsByClassName代替getElementByClassName
第二个注意事项是，当通过类选择器选择元素时，必须遍历元素。 因此，我在类为“ an”的元素上编写了一个循环：
var song = document.getElementById("ad"); function togglePlay() { song.play(); Array.from(document.getElementsByClassName("an")).forEach( function(element, index, array) { element.style.animationPlayState = "running"; } ) } function togglePause() { song.pause(); Array.from(document.getElementsByClassName("an")).forEach( function(element, index, array) { element.style.animationPlayState = "paused"; } ) }
.lyrics { font-weight: lighter; font-size: 1vw; } .l1.an { animation: tae 1s; animation-direction: alternate; animation-duration: 5s; animation-delay: 12s; } .l2.an { animation: tae 1s; animation-duration: 5s; animation-fill-mode: alternate; animation-delay: 15s; } .l3.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 18s; } .l4.an { animation: tae 1s; animation-duration: 7s; animation-fill-mode: alternate; animation-delay: 24s; } .l5.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 29s; } @keyframes tae { 0% {background: initial;} 30% {background: blue;} 60% {background: blue;} 100% {background: initial;} }
<!doctype html> <html> <head> <link rel="stylesheet" href="css1.css"> <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> <meta http-equiv="refresh" content="106"> <title>PUP HYMN</title> </head> <body> <audio id="ad"> <source src = "pup.mp3" type="audio/mp3"> </audio> <div class="bg"></div> <div class="bg-box"> <img src="PUPLogo.png"> <p class="PUP">Polytechnic University of the Philippines</p> <h1>PUP HYMN</h1> <p class="lyrics"> <div class="l1 an">Sintang Paaralan</div> <div class="l2 an">Tanglaw ka ng bayan</div> <div class="l3 an">Pandayan ng isip ng kabataan</div> <div class="l4 an">Kami ay dumating nang salat sa yaman<br></div> <div class="l5 an">Hanap na dunong ay iyong alay<br></div> <!--I cut the lyrics here to make it shorter--> <input type="button" value="Play" onclick="togglePlay()" class="but" ></input> <input type="button" value="Pause" onclick="togglePause()" class="but"></input> </div> </body> </html>
解决方案2
1 已采纳 2019-01-10 08:14:10
使用循环将所有具有类名an元素设置为.style.animationPlayState ，并使用getElementsByClassName()获取具有类名an所有元素。
var song = document.getElementById("ad"); function togglePlay() { song.play(); var items=document.getElementsByClassName("an"); for (var i=0; i < items.length; i++) { items[i].style.animationPlayState = "running"; } } function togglePause() { song.pause(); var items=document.getElementsByClassName("an"); for (var i=0; i < items.length; i++) { items[i].style.animationPlayState = "paused"; } }
.lyrics { font-weight: lighter; font-size: 1vw; } .l1.an { animation: tae 1s; animation-direction: alternate; animation-duration: 5s; animation-delay: 12s; } .l2.an { animation: tae 1s; animation-duration: 5s; animation-fill-mode: alternate; animation-delay: 15s; } .l3.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 18s; } .l4.an { animation: tae 1s; animation-duration: 7s; animation-fill-mode: alternate; animation-delay: 24s; } .l5.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 29s; } @keyframes tae { 0% {background: initial;} 30% {background: blue;} 60% {background: blue;} 100% {background: initial;} }
<audio id="ad"> <source src = "pup.mp3" type="audio/mp3"> </audio> <script type="text/javascript"> </script> <div class="bg"></div> <div class="bg-box"> <img src="PUPLogo.png"> <p class="PUP">Polytechnic University of the Philippines</p> <h1>PUP HYMN</h1> <p class="lyrics"> <div class="l1 an">Sintang Paaralan</div> <div class="l2 an">Tanglaw ka ng bayan</div> <div class="l3 an">Pandayan ng isip ng kabataan</div> <div class="l4 an">Kami ay dumating nang salat sa yaman<br></div> <div class="l5 an">Hanap na dunong ay iyong alay<br></div> <!--I cut the lyrics here to make it shorter--> <input type="button" value="Play" onclick="togglePlay()" class="but" /> <input type="button" value="Pause" onclick="togglePause()" class="but"/> </div>
如何暂停和继续播放该动画，并且可以使用纯CSS完成动画？
[英]How can I pause and resume this animation and can it be done with pure CSS?
单击同级组件中的按钮时，如何暂停/恢复计时器？
[英]How do I pause/resume a timer when a button from sibling component is clicked?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.