我正在编写一个媒体播放器，我已经使用了JavaScript和CSS来使歌曲的元信息滚动到字幕风格的效果中，但仅当曲目正在播放时.当您按下播放/暂停按钮时，我使用JS添加/删除了动画类.我想知道，如果动画类在动画中间被移除，是否有任何方法可以让动画在停止之前播放到结束.
var MetaScroll = document.getElementById("MetaScroll");
var PlayButton = document.getElementById("PlayButton");
function playPause() {
MetaScroll.classList.toggle('scrolling');
PlayButton.classList.toggle('fa-play');
PlayButton.classList.toggle('fa-pause');
}body {
background: black;
}
.albumArt {
width: 200px;
height: 200px;
border: 3px solid #212121;
display: flex;
flex-direction: column-reverse;
}
.metaContainer {
height: 25%;
overflow: hidden;
background-color: white;
}
.meta {
white-space: nowrap;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.meta p {
font-family: Courier, monospace;
font-size: 20px;
margin: 0;
color: black;
}
.scrolling {
transform: translateX(0);
animation: b-text-scroll 5s linear infinite;
}
@keyframes b-text-scroll {
0% {
transform: translate3d(0, 0, 0);
}
20% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.pIcons {
font-size: 20px;
color: white;
background-color: transparent;
border: none;
}<script src="https://kit.fontawesome.com/1706aa300d.js" crossorigin="anonymous"></script>
<body>
<div class="albumArt">
<div class="metaContainer">
<div id="MetaScroll" class="meta">
<p> The Absense of a Title - A Deadly Lack of Artist</p>
<p> The Absense of a Title - A Deadly Lack of Artist</p>
</div>
</div>
</div>
<button class="pIcons" onclick="playPause()">
<i id="PlayButton" class="fa-solid fa-play"></i>
</button>
</body>