javascript - 单击链接将暂停动画播放状态更改为运行

Question

使用 CSS 和 Javascript(最好不要使用 jQuery，因为我也不明白)如何设置 CSS 动画以在用户单击时触发从暂停状态到播放状态文本链接 (href) 而不是按钮？

Answer 1

非常简单。只需将 animation-play-state 初始设置为 paused，然后添加一个将 animation-play-state 设置为 running 的类 单击 anchor 链接时。

向事件处理程序添加一个return false，以防止 anchor 的默认操作发生。

window.onload = function() {
  var els = document.getElementsByClassName("play-link");
  for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', function(e) {
      e.target.previousElementSibling.classList.add('play');
      return false;
    });
  }
}

div {
  animation: shake 1s infinite;
  animation-play-state: paused;
  border: 1px solid;
  width: 200px;
  height: 100px;
}
@keyframes shake {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(200px);
  }
}
div.play {
  animation-play-state: running;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='animate'>Some text</div>
<a href='#' class='play-link'>Play</a>
<div class='animate'>Some text</div>
<a href='#' class='play-link'>Play</a>

---

您甚至可以通过打开和关闭 play 类在 paused 和 running 状态之间切换。

window.onload = function() {
  var els = document.getElementsByClassName("play-link");
  for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', function(e) {
      e.target.previousElementSibling.classList.toggle('play');
      return false;
    });
  }
}

div {
  animation: shake 4s infinite;
  animation-play-state: paused;
  border: 1px solid;
  width: 200px;
  height: 100px;
}
@keyframes shake {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(400px);
  }
  100% {
    transform: translateX(0px);
  }  
}
div.play {
  animation-play-state: running;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='animate'>Some text</div>
<a href='#' class='play-link'>Toggle Play State</a>
<div class='animate'>Some text</div>
<a href='#' class='play-link'>Toggle Play State</a>