Попытка приостановить анимацию CSS, добавив приостановленный класс - PullRequest
Новая
       7

Попытка приостановить анимацию CSS, добавив приостановленный класс

0 голосов
/ 03 января 2019

Итак, я видел людей, которые рекомендуют этот метод как лучший способ приостановить анимацию CSS.Просто добавив или удалив класс, в котором состояние воспроизведения анимации установлено на паузу для элемента или от него.Вот мои попытки: 

@keyframes run {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
}

.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
}
<!DOCTYPE html>

<html lang='en'>

<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div id='animation' class='paused'></div>
</body>

</html>

Насколько я понимаю, анимация должна отображаться в браузере в режиме паузы, но вместо этого она работает.Я попытался добавить !important после paused и попытался сделать класс более конкретным, то есть #animation.paused.Что я делаю не так?

Ответы [ 3 ]

0 голосов
/ 03 января 2019

Вы можете достичь этого желаемого эффекта без необходимости JS. Я бы попробовал следующее:

HTML 

<div id="animation"></div>

CSS 

#animation {
   width: 256px;
   height: 256px;
   position: absolute;
   background-image: url('spritesheet.png');
   animation: run .5s steps(6) infinite;
};

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

@keyframes run {
   from {background-position: 0px;}
   to {background-position: -1536px;}
}
0 голосов
/ 04 января 2019

Вы можете сделать это через CSS с помощью чего-то вроде :hover или с помощью скрипта.Здесь я демонстрирую оба. 

function modifyclass() {
  if (document.getElementById("animation").classList.contains('running')) {
    document.getElementById("animation").classList.remove('running');
  } else {
    document.getElementById("animation").classList.add('running');
  }
  //  document.getElementById("animation").classList.toggle('running');
}
var el = document.getElementById("animate");
el.addEventListener("click", modifyclass, false);
@keyframes run {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

#animation.paused:hover,
#animation.running {
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
}

.container {
  margin-top: 1em;
}
<body>
  <div id='animation' class='paused'></div>
  <div class="container">
    <button id="animate" type="button">Do it</button>
  </div>
</body>
0 голосов
/ 03 января 2019

Это потому, что #animation является селектором идентификатора, и он более специфичен, чем селектор класса (.paused), поэтому последний не будет переопределять первый.

Замените .paused на #animation.paused, и оно будет работать. 

function toggleAnimationPlayState() {
  document.querySelector('#animation').classList.toggle('paused')
}
@keyframes run {
 from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
}

#animation.paused {
  animation-play-state: paused;
}
<button onclick="toggleAnimationPlayState()">Toggle paused class</button>
<div id='animation' class="paused"></div>
...