javascript - 如何暂停所有 CSS 动画并在需要时恢复
问题描述
我正在制作这个网站,当按下“播放”按钮时播放我们的学校赞美诗,按下“暂停”按钮时会暂停。旁边是歌词的突出动画“每行”。但是,我无法全局暂停动画。我想暂停音频和 css 动画,但只有音频是实际暂停的,所以当我点击播放按钮时,歌词突出显示和音频不再同步。
我尝试过在 CSS 中使用动画播放状态,但没有一个效果很好
对不起,如果代码很长,因为我做了“每行”歌词,但我想做的是暂停任何动画,以便在我恢复时它仍然与音频同步。
.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>
解决方案
首先,您需要使用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>
推荐阅读
- android - java.lang.SecurityException:权限拒绝:启动意图
- c# - 带有附件的 Azure 函数 POST 请求
- ruby-on-rails - 连接到 Rails 服务器时 Puma mini SSL 错误
- javascript - Javascript for循环将结果返回到嵌套数组
- java - 404 状态而不是返回令牌!为什么?
- python - 熊猫用相邻的连续值替换少于 n 个连续值
- testing - 如何在 testcafe 中的真实浏览器中进行负载测试[不是基于 HTTP 的负载测试,如 JMeter]?
- python-3.x - 如何在列表之间的 venn_matplotlib 中获得交集?
- angular9 - 如何解决 Ionic 中的区域感知承诺
- html - CSS 选择除 DIV 包含类之外的所有输入