Keadaan main balik animasi css mudah alih jeda tidak berfungsi pada ios animation-play-state Saya mahu klik pada gambar untuk menghentikannya, dan kemudian klik pada gambar untuk terus berputar. Ini boleh dicapai pada telefon Android, tetapi pada iOS, klik pertama pada gambar terus berputar tanpa sebarang pergerakan statik, sebaliknya, pada klik kedua,...

Pada iOS animation-play-state adalah tidak sah. Anda boleh tindih status Berikut ialah contoh: Pautan penerangan

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>

给我你的怀抱2708 hari yang lalu1217

javascript - jeda keadaan main balik animasi css mudah alih tidak berfungsi pada ios animation-play-state

membalas semua(1)saya akan balas