Jak wstrzymać i wznowić animację CSS3 za pomocą JavaScript?

Próbowałem google i spojrzeć z tego forum na rozwiązanie mojego problemu, ale jak dotąd nie miałem szczęścia. Chciałbym wstrzymać moją animację CSS3 (pokaz slajdów), klikając zdjęcie, a następnie wrócić do tej samej animacji, klikając zdjęcie.Jak wstrzymać i wznowić animację CSS3 za pomocą JavaScript?

Wiem, jak wstrzymać pokaz slajdów i mogłem go wznowić raz, ale przestał działać, jeśli spróbuje wstrzymać i wznowić więcej niż jeden raz. Oto jak mój kod wygląda następująco:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.pic { 
    position: absolute; 
    opacity: 0; 
} 
#pic1 { 
    -webkit-animation: pic1 4s infinite linear; 
} 
#pic2 { 
    -webkit-animation: pic2 4s infinite linear; 
} 
@-webkit-keyframes pic1 { 
    0% {opacity: 0;} 
    5% {opacity: 1;} 
    45% {opacity: 1;} 
    50% {opacity: 0;} 
    100% {opacity: 0;} 
} 
@-webkit-keyframes pic2 { 
    0% {opacity: 0;} 
    50% {opacity: 0;} 
    55% {opacity: 1;} 
    95% {opacity: 1;} 
    100% {opacity: 0;} 
} 
</style> 
<script type="text/javascript"> 
function doStuff(){ 
    var pic1 = document.getElementById("pic1"); 
    var pic2 = document.getElementById("pic2"); 

    pic1.style.webkitAnimationPlayState="paused"; 
    pic2.style.webkitAnimationPlayState="paused"; 

    pic1.onclick = function(){ 
     pic1.style.webkitAnimationPlayState="running"; 
     pic2.style.webkitAnimationPlayState="running"; 
    } 

    pic2.onclick = function(){ 
     pic1.style.webkitAnimationPlayState="running"; 
     pic2.style.webkitAnimationPlayState="running"; 
    } 
} 
</script> 
</head> 
<body> 
    <img id="pic1" class="pic" src="photo1.jpg" /> 
    <img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" /> 
</body>                 
</html>

Nie chcę używać żadnych bibliotek js (np jQuery) lub jakiegokolwiek innego rozwiązania zewnętrznego.

Domyślam się, że moje funkcje w ramach funkcji doStuff nadal działają i dlatego pause i resume działają tylko raz.

Czy istnieje sposób na wyczyszczenie tych funkcji po ich kliknięciu? Czy próbuję to zrobić w całkowicie niewłaściwy sposób? Pomoc jest doceniana. :)

Źródło

2011-04-27 nqw1

Oto rozwiązanie przy użyciu javascript:

var imgs = document.querySelectorAll('.pic'); 
 

 
for (var i = 0; i < imgs.length; i++) { 
 
    imgs[i].onclick = toggleAnimation; 
 
    imgs[i].style.webkitAnimationPlayState = 'running'; 
 
} 
 

 
function toggleAnimation() { 
 
    var style; 
 
    for (var i = 0; i < imgs.length; i++) { 
 
    style = imgs[i].style; 
 
    if (style.webkitAnimationPlayState === 'running') { 
 
     style.webkitAnimationPlayState = 'paused'; 
 
     document.body.className = 'paused'; 
 
    } else { 
 
     style.webkitAnimationPlayState = 'running'; 
 
     document.body.className = ''; 
 
    } 
 
    } 
 
}

.pic { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
#pic1 { 
 
    -webkit-animation: pic1 4s infinite linear; 
 
} 
 

 
#pic2 { 
 
    -webkit-animation: pic2 4s infinite linear; 
 
} 
 

 
@-webkit-keyframes pic1 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes pic2 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    95% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.paused { 
 
    background-color: #ddd; 
 
}

<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"> 
 
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

rozwiązanie jQuery (krótsze i bardziej czytelny):

var imgs = $('.pic'), 
 
    playState = '-webkit-animation-play-state'; 
 

 
imgs.click(function() { 
 
    imgs.css(playState, function(i, v) { 
 
    return v === 'paused' ? 'running' : 'paused'; 
 
    }); 
 
    $('body').toggleClass('paused', $(this).css(playState) === 'paused'); 
 
});

.pic { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
#pic1 { 
 
    -webkit-animation: pic1 4s infinite linear; 
 
} 
 

 
#pic2 { 
 
    -webkit-animation: pic2 4s infinite linear; 
 
} 
 

 
@-webkit-keyframes pic1 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes pic2 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    95% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.paused { 
 
    background-color: #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"> 
 
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

Źródło

2011-04-27 13:16:34

Ten komentarz przychodzi nieco późno, ale dziękuję za to! Rozwiązał problem. – nqw1

128

Ułatwiam to zrobić z klasą css. Dzięki niemu możesz użyć prefiksów dla każdej przeglądarki.

Następnie wystarczy dodać lub usunąć tę klasę do animowanego elementu, aby wstrzymać/wznowić animację.

Źródło

2012-10-09 09:27:33

To jest lepsze rozwiązanie i powinno być akceptowaną odpowiedzią, znacznie czystszą. –

to powinna być zaakceptowana odpowiedź. – psychobunny

Oto przykład ilustrujący: http://jsfiddle.net/fRzwS/313/ – ayjay

Nie przetestowałem tego, ale może coś takiego?

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.pic { position: absolute;opacity: 0; } 
.pic1 { -webkit-animation: pic1 4s infinite linear; } 
.pic2 { -webkit-animation: pic2 4s infinite linear; } 
@-webkit-keyframes pic1 { 0% {opacity: 0;} 
          5% {opacity: 1;} 
          45% {opacity: 1;} 
          50% {opacity: 0;} 
          100% {opacity: 0;} } 
@-webkit-keyframes pic2 { 0% {opacity: 0;} 
          50% {opacity: 0;} 
          55% {opacity: 1;} 
          95% {opacity: 1;} 
          100% {opacity: 0;} } 
</style> 
<script type="text/javascript"> 
function doStuff(){ 
    var pic1 = document.getElementById("pic1"); 
    var pic2 = document.getElementById("pic2"); 

    pic1.className="pic paused"; 
    pic2.className="pic paused"; 

    pic1.onclick = function(){ 
     pic1.className="pic pic1"; 
     pic2.className="pic pic2"; 
    } 
    pic2.onclick = function(){ 
     pic1.className="pic pic1"; 
     pic2.className="pic pic2"; 
    } 
} 
</script> 
</head> 
<body> 
    <img id="pic1" class="pic pic1" src="photo1.jpg" /> 
    <img id="pic2" class="pic pic2" src="photo2.jpg" onclick="doStuff()" /> 
</body>                 
</html>

Źródło

2014-04-15 19:27:53 user40521

To jest rozszerzenie odpowiedź udzieloną przez Luis Hijarrubia

.pause { 
     -webkit-animation-play-state: paused !important; 
     -moz-animation-play-state: paused !important; 
     -o-animation-play-state: paused !important; 
     animation-play-state: paused !important; 
    }

W mojej stronie byłem powodując zmianę klasy od elementu nadrzędnego. Wszystko, co chciałem zrobić, to obrócić obraz w środku. Wydaje się jednak, że ponieważ nie używałam wskaźnika, dodawanie wstrzymanej klasy nie miało żadnego wpływu na stan animacji.

Użycie! Important zapewniło, że te wartości zostały nadpisane nowymi dodanymi wartościami CSS.

Źródło

2014-07-17 05:41:45 tensai

Dla wyjaśnienia, jest tak ze względu na specyfikę css. Skrypt, który dodaje właściwość bezpośrednio do elementu (np. Odpowiedź Sime'a) nie miałby tego problemu, ponieważ style "inline" domyślnie zastępują reguły z arkuszy stylów. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – xec

To jest konkretna kwestia, której używają Twój kod HTML i CSS. W najlepszym razie powinien to być komentarz, nie odpowiada na faktyczne pytanie. –

Tutaj przyszedł napisać tę odpowiedź, jeśli nie została opublikowana. W moim przypadku musiałem zatrzymać kilka jednoczesnych animacji i uznałem to za najprostszy sposób. Pozwala także dodawać efekty, takie jak '.pause: hover', jeśli odpowiada potrzebom. –

var e = document.getElementsById("Your_Id"); 


e.addEventListener("animationstart", listener, false); 
e.addEventListener("animationend", listener, false); 
e.addEventListener("animationiteration", listener, false); 


function listener(e) { alert("Your POSITION parameter:" + .target.style.position); 
    switch(e.type) { 
    case "animationstart": 
     d = "Started: elapsed time is " + e.elapsedTime; 
     break; 
    case "animationend": 
     d = "Ended: elapsed time is " + e.elapsedTime; 
     break; 
    case "animationiteration": 
     d= "New loop started at time " + e.elapsedTime; alert("pausing for 1 seconddddddd!!!!!!!"); e.target.style.animationPlayState = "paused";  window.setTimeout(function(){e.target.style.animationPlayState = "running";}, 1000); 
     break; 
    } 
}

Źródło

2015-07-20 08:20:03

Jak wstrzymać i wznowić animację CSS3 za pomocą JavaScript?

Odpowiedz

Powiązane problemy