将已暂停的动画的播放状态更改为点击链接时运行 [英] Change paused animation's play state to running on click of a link

问题描述

使用CSS和Javascript（最好不是jQuery，因为我也不明白）如何设置CSS动画从暂停状态到用户点击文本链接（href）而不是按钮？

解决方案

这很简单。只需将 animation-play-state 设置为 paused ，然后添加一个类，该类设置 animation-play-state 到运行。

向事件处理程序添加 return false ，以防止锚的默认动作发生。

  window.onload = function（）{var els = document.getElementsByClassName（play-link）; for（var i = 0; i  

  div {animation：shake 1s infinite; animation-play-state：paused; border：1px solid; width：200px; height：100px;} @ keyframes shake {from {transform：translateX（0px）; }到{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' >部分文字< / div>< a href ='＃'class ='play-link'>播放< / a>< div class ='animate'>部分文字< / div>< a href ='＃'class ='play-link'>播放< / a>  

---

您甚至可以在暂停和之间切换

  window.onload = function ）{var els = document.getElementsByClassName（play-link）; for（var i = 0; i  

  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' >部分文字< / div>< a href ='＃'class ='play-link'>切换播放状态< / a>< div class ='animate'>部分文字< / div> a href ='＃class ='play-link'>切换播放状态< / a>  

$ b

Using CSS and Javascript (preferably not jQuery as I don't understand as well) how do I set a CSS animation to go from a pause state to a play state triggered when the user clicks a text link (href) as opposed to a button?

解决方案

It is very simple. Just set the animation-play-state to paused initially and then add a class which sets the animation-play-state to running when the anchor link is clicked.

Add a return false to the event handler to prevent the default action of the anchor from happening.

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>

---

You can even toggle between paused and running states by toggling the play class on and off.

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>

这篇关于将已暂停的动画的播放状态更改为点击链接时运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！