Как приостановить и возобновить анимацию CSS3 с помощью JavaScript?

Я пробовал google и смотрю с этого форума решение для моей проблемы, но пока не повезло. Я хотел бы приостановить мою анимацию CSS3 (показ слайдов изображений), щелкнув изображение, а также вернуться к той же анимации, щелкнув изображение.Как приостановить и возобновить анимацию CSS3 с помощью JavaScript?

Я знаю, как приостановить слайд-шоу, и я также смог возобновить его один раз, но затем он перестает работать, если попытается приостановить и возобновить более одного раза. Вот как мой код выглядит следующим образом:

<!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>

Я не хочу использовать какие-либо библиотеки JS (например, JQuery) или любое другое внешнее решение.

Моя догадка заключается в том, что мои функции внутри функции doStuff все еще работают, и именно поэтому pause и resume работает только один раз.

Есть ли способ очистить эти функции после того, как я нажал их один раз? Или я пытаюсь сделать это совершенно неправильно? Помощь приветствуется. :)

источник

2011-04-27 nqw1

Вот решение с помощью 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">

решение JQuery (короче и более читаемым):

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">

источник

2011-04-27 13:16:34

Этот комментарий приходит немного позже, но спасибо за это! Он решил проблему. – nqw1

128

Мне легче сделать это с помощью класса css. С его помощью вы можете использовать префиксы для каждого браузера.

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

Тогда вам нужно только добавить или удалить этот класс в ваш анимированный элемент yo pause/resume.

источник

2012-10-09 09:27:33

Это лучшее решение и должно быть принятым ответом, гораздо более чистым. –

Это должен быть принятый ответ – psychobunny

Вот пример, на который можно проиллюстрировать: http://jsfiddle.net/fRzwS/313/ – ayjay

Я не тестировал его, но, возможно, что-то вроде этого?

<!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>

источник

2014-04-15 19:27:53 user40521

Это расширить ответ дал Луис 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; 
    }

В моей странице я запуская изменения класса из родительского элемента. Все, что я хотел сделать, это повернуть изображение внутри. Но похоже, что, поскольку я не использовал зависание, добавление приостановленного класса не имело никакого отношения к состоянию анимации.

Использование! Важно, чтобы эти значения были перезаписаны новыми добавленными значениями CSS.

источник

2014-07-17 05:41:45 tensai

Просто, чтобы уточнить, это из-за специфики CSS. Сценарий, который добавляет свойство непосредственно к элементу (например, ответ Симе), не будет иметь этой проблемы, потому что стили «inline» переопределяют правила со стилей по умолчанию. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – xec

Это конкретная проблема, вызванная вашими HTML и CSS. В лучшем случае это должен быть комментарий, он не отвечает на реальный вопрос. –

Пришел сюда, чтобы опубликовать этот ответ, если он не был отправлен. В моем случае мне нужно было приостановить несколько одновременных анимаций и нашел, что это самый простой способ. Он также позволяет добавлять эффекты, такие как '.pause: hover', если это соответствует потребностям. –

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; 
    } 
}

источник

2015-07-20 08:20:03

Как приостановить и возобновить анимацию CSS3 с помощью JavaScript?

ответ

Смежные вопросы