如何用HTML按钮暂停CSS动画?

我试图用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有什么建议吗?

当你想要暂停或恢复动画时，你可以添加或删除你定义的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>

这样

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>

相关内容

最新更新

热门标签：