我正在嘗試通過單擊 HTML 按鈕來暫停 CSS 影片，并使用 JS 執行暫停。到目前為止，我已經嘗試使用 JS 更改影片狀態，但它不起作用 - 影片播放完畢，按鈕似乎沒有效果。
這是我的 JS 片段：
var sun = document.getElementById("sun");
var sky = document.getElementById("sky");
var pauseBtn = document.getElementById("pauseBtn");
function pauseAnimation(){
if((pauseBtn.clicked) == true){
sun.style.animationPlayState("paused");
sky.style.animationPlayState("paused");
}
}h2:after {
content : ' no css!';
color : red;
}<h2>no HTML</h2>如有必要，可以分享更多代碼，根據您在 JS 中看到的內容，有什么提示嗎？
uj5u.com熱心網友回復：
這邊走
const
sun = document.querySelector('#sun')
, btPP = document.querySelector('#PlayPause')
;
btPP.onclick = () =>
{
btPP.textContent = sun.classList.toggle('pause') ? 'Play' : 'Pause'
}article {
margin:1em;
}
#sun{
background-color : orange;
color : #fff;
margin : auto;
margin-left : auto;
margin-left : 0;
border : 5px dotted yellow;
width : 100px;
height : 100px;
border-radius : 50%;
}
.pause {
animation-play-state: paused;
}
.animating {
animation-name : slide;
animation-duration : 3s;
animation-timing-function : ease-in;
animation-iteration-count : infinite;
animation-direction : alternate;
}
@keyframes slide {
from { margin-left : 0 }
to { margin-left : 80% }
}<article>
<div id="sun" class="animating"></div>
</article>
<button id="PlayPause"> Pause</button>uj5u.com熱心網友回復：
當您想要暫停或恢復影片時，您可以添加或洗掉定義 CSS 影片的類名。
<style>
.sky-animation-class-name {
animation: /* animation properties */;
}
.sun-animation-class-name {
animation: /* animation properties */;
}
</style>
<body>
<div id="sky" class="sky-animation-class-name"></div>
<div id="sun" class="sun-animation-class-name"></div>
</body>
<script>
var sky = document.getElementById("sky");
var sun = document.getElementById("sun");
var pauseBtn = document.getElementById("pauseBtn");
var resumeBtn = document.getElementById("resumeBtn");
function pauseAnimation(){
if((pauseBtn.clicked) == true){
sky.classList.remove("sky-animation-class-name");
sun.classList.remove("sun-animation-class-name");
}
}
function resumeAnimation(){
if((resumeBtn.clicked) == true){
sky.classList.add("sky-animation-class-name");
sun.classList.add("sun-animation-class-name");
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/327252.html
標籤：javascript html css 动画片 链接器