Как запустить и остановить анимацию CSS?

Question

Мне очень трудно понять, как запустить и остановить анимацию и повернуть ее вспять.

Я назначил анимацию свойству element.style.animation, и из того, что я прочитал, я решил использовать:

element.style.animationPlayState = "running";

, чтобы запустить его, и:

element.style.animationPlayState = "paused";

чтобы остановить это.

Но он сообщает, что "работает" все время.

Кто-нибудь разобрался, как запустить и остановить анимацию?

У меня есть связанный вопрос здесь . Связанная часть - это блок кода, который я использую для запуска и остановки анимации:

var style = element.style;
var animation = null;
style.animationPlayState = "paused";

if (style.animation) {
    animation = style.animation;
    style.animation = null;
    style.animationPlayState = "paused";
    element.addEventListener("animationend", function(event) {
        log("animation ended");
        element.removeEventListener("animationend", arguments.callee);
    });

    setTimeout(function() {
        style.animation = animation;
        style.animationPlayState = "paused";
        style.animationDirection = "reverse";
        style.animationPlayState = "running";
    }, 30);
}

Цель проста:

• Отображение div, когда пользователь нажимает кнопку
• div дисплей отсутствует, поэтому установите его на display: block
• Fade in div
• ПОЗЖЕ - пользователь нажимает кнопку закрытия на div
• Затухание div
• После затухания установить display: none

Способ сделать что-то вроде этого:

fadeInElement(element)
fadeOutElement(element) 

Answer 1

С помощью Javascript Web Animations API вы можете использовать такие вещи, как:

variable.play();
variable.pause();

, это очень мощный инструмент, вот документация

Такжевозможность установить скорость воспроизведения, включая отрицательные числа, которые будут воспроизводить анимацию в обратном порядке. похоже, что он решает все проблемы, которые вы подняли здесь.

Вот полифилл, который оказался очень мощным, даже работает в IE

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

Answer 2

Вы можете переключать классы с помощью setTimeout, что-то вроде этого может быть?

var theDiv = document.querySelectorAll('div')[0];
function showDiv() {
  theDiv.setAttribute('class', 'fadeIn');
  setTimeout(function(){ theDiv.style.opacity = '1'; }, 2000);
}
function hideDiv() {
  theDiv.removeAttribute('class');  
  theDiv.setAttribute('class', 'fadeOut');
  setTimeout(function(){ theDiv.style.opacity = '0' }, 2000);
}

div {height: 100px; height: 100px; background: black; opacity: 0;}
.fadeIn {animation: 2s fadein}
.fadeOut {animation: 2s fadeout}
@keyframes fadein {  to {opacity: 1;} }
@keyframes fadeout {  to {opacity: 0;} }

<div></div>
<button onclick="showDiv()">Show DIV</button>
<button onclick="hideDiv()">Hide DIV</button>

EDIT

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

var theDiv = document.querySelectorAll('div')[0];
var anBtn = document.querySelector('#animateBtn');
var clicks = 1;
anBtn.addEventListener('click', function() {
  anBtn.disabled = true;
  if ((clicks/2) != (clicks/2).toFixed()) {
    showDiv();
  }
  else {
    hideDiv();
  }
  clicks += 1;
});
function showDiv() {
  theDiv.setAttribute('class', 'fadeIn');
  setTimeout(function(){ theDiv.style.opacity = '1'; anBtn.disabled = false; anBtn.textContent = 'Hide Div'; }, 2000);
}
function hideDiv() {
  theDiv.removeAttribute('class');
  theDiv.setAttribute('class', 'fadeOut');
  setTimeout(function(){ theDiv.style.opacity = '0'; anBtn.disabled = false; anBtn.textContent = 'Show Div'; }, 2000);
}

div {height: 100px; height: 100px; background: black; opacity: 0;}
.fadeIn {animation: 2s fadein}
.fadeOut {animation: 2s fadeout}
@keyframes fadein {  to {opacity: 1;} }
@keyframes fadeout {  to {opacity: 0;} }

<div></div>
<button id="animateBtn">Show DIV</button>

Answer 3

Попытка решить свой вопрос с помощью. Это похоже на работу. Но, кажется, разбить окно редактирования console.log. Также, кажется, сломался после нескольких пробежек. Может быть, не связано.

var fadeInAnimation = "2s fadein";
var fadeOutAnimation = "2s fadein reverse";

function fadeIn() {
  var element = document.getElementById('box');
  //console.log("element", element);
  element.style.animation = fadeInAnimation;
  element.style.display = "block";
  //element.style.animationPlayState = "running";
}
function fadeOut() {
  var element = document.getElementById('box');
  element.style.display = "block";
  element.style.animationPlayState = "paused";
  element.style.animation = fadeOutAnimation;
  element.style.animationPlayState = "running";
  element.addEventListener("animationend", function(event) {
    element.style.display = "none";
console.log("animation ended");
    element.removeEventListener("animationend", arguments.callee);
  });
}

#box {
  width: 100px; 
  height: 100px; 
  background: red; 
  opacity: 1;
  display: none;
}

@keyframes fadein {  from {opacity: 0 } to {opacity: 1;} }
@keyframes fadeout {  from {opacity: 1 } to {opacity: 0;} }

<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>

<div id="box">
</div>