如何暂停所有 CSS 动画并在需要时恢复答案

【问题标题】：How do I pause ALL CSS animations and resume when needed如何暂停所有 CSS 动画并在需要时恢复
【发布时间】：2019-01-10 16:14:10
【问题描述】：

我正在制作这个网站，当按下“播放”按钮时播放我们的学校赞美诗，按下“暂停”按钮时会暂停。旁边是歌词的突出动画“每行”。但是，我不能全局暂停动画。我想暂停音频和 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>

【问题讨论】：

标签： javascript css html

【解决方案1】：

首先需要使用 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】：

使用类名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>

【讨论】：

成功了！我不知道我需要一个循环，但它似乎是我需要的解决方案。谢谢！