Jak zatrzymać i wznowić animację CSS3 przy użyciu JavaScript?
Próbowałem wygooglować i poszukać z tego forum rozwiązania mojego problemu, ale jak na razie bez powodzenia. Chciałbym zatrzymać moją animację CSS3 (pokaz slajdów obrazu), klikając zdjęcie, a także powrócić do tej samej animacji, klikając zdjęcie.
Wiem, jak zatrzymać pokaz slajdów i byłem również w stanie wznowić go raz, ale potem przestaje działać, jeśli spróbuj zatrzymać i wznowić więcej niż jeden raz. Oto jak wygląda mój kod:
<!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 jakiekolwiek inne rozwiązanie zewnętrzne.
Domyślam się, że moje funkcje wewnątrz doStuff
wciąż działają i dlatego pause
i resume
działają tylko raz.
Czy istnieje sposób, aby wyczyścić te funkcje po kliknięciu ich raz? Czy próbuję to zrobić w zupełnie zły sposób? Pomoc jest doceniana. :)
5 answers
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 czytelne):
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">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-20 02:40:02
Łatwiej mi to zrobić z klasą css. Dzięki niemu możesz używać prefiksów dla każdej przeglądarki.
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
Następnie musisz tylko dodać lub usunąć tę klasę do animowanego elementu yo pause / wznowić animację.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-09 09:33:54
To rozszerzenie odpowiedzi udzielonej przez Luisa 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;
}
Na mojej stronie uruchamiałem zmianę klasy z elementu nadrzędnego. Chciałem tylko obrócić obraz w środku. Ale wygląda na to, że ponieważ nie używałem kursora, dodanie wstrzymanej klasy nie miało żadnej różnicy w stanie animacji.
Użycie !ważne, aby te wartości zostały nadpisane przez nowe dodane wartości CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-17 05:41:45
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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-20 08:20:03
Nie testował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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-15 19:27:53