javascript - jeda keadaan main balik animasi css mudah alih tidak berfungsi pada ios animation-play-state
Jeda keadaan main balik animasi css mudah alih tidak berfungsi pada ios animation-play-state
Saya mahu klik pada gambar untuk menghentikannya, dan klik pada gambar sekali lagi untuk terus berputar. Ia boleh dicapai pada telefon Android, tetapi pada iOS, apabila anda mengklik gambar untuk kali pertama, ia akan terus berputar tanpa sebarang pergerakan statik Sebaliknya, apabila anda mengkliknya untuk kali kedua, gambar akan berkelip pada kedudukan daripada klik pertama dan teruskan berputar.
<style type="text/css">
#wls .musicCon{width: 35px;height: 35px;position:fixed;top:15px;right:15px;z-index: 9999; }
img.rotate{
animation:spin 4s infinite linear;
-moz-animation:spin 4s infinite linear;
-webkit-animation:spin 4s infinite linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
}
@keyframes spin {
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100%{
-o-transform:rotate(360deg);
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100%{
-moz-transform:rotate(360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
img.pauseWalk {
animation:spin 4s infinite linear;
-moz-animation:spin 4s infinite linear;
-webkit-animation:spin 4s infinite linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
}
</style>
<body style="background:#fff" id="wls">
<img src="imgage/music.png" class="musicCon rotate" />
<audio autoplay="autoplay" loop="loop" id="bgm">
<source src="music/bgm.mp3" type="audio/mpeg">
<source src="music/bgm.ogg" type="audio/ogg">
</audio>
<script>
var num=1;
$("#wls .musicCon").bind("click",function(){
if(num==1){
$(this).removeClass("rotate");
$(this).addClass("pauseWalk");
$("#bgm")[0].pause();
num++;
return num;
}else{
$(this).removeClass("pauseWalk");
$(this).addClass("rotate");
$("#bgm")[0].play();
num=1;
return num;
}
})
</script>
</body>