javascript - 停止在 css 上旋转动画

Question

我想知道如何在没有点击按钮交互的情况下在随机位置平滑地停止我的旋转动画 (css)。

span.glyphicon-arrow-up {
position: absolute;
top: 31%;
left: 36%;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation-iteration-count: 2;
animation:spin 2s linear infinite;
font-size: 14.0em;

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

希望大家帮帮我。 (我对 javascript 一无所知)

Answer 1

首先创建第二个 CSS 类来应用动画。然后使用 getComputedStyle计算并设置元素的旋转并在事件触发时删除动画类。您如何触发事件取决于您；为了速度和简单性，我只使用了一个 click 事件，但您可以设置一个具有随机生成的延迟的超时来触发它，而无需任何用户交互。我还为不支持 transform 属性的浏览器提供了一个回退，它只是将其设置为 initial。

document.querySelector("div").addEventListener("click",function(){
  this.style.transform=window.getComputedStyle(this).getPropertyValue("transform")||"initial";
  this.classList.remove("spin");
});

div{
  background:#000;
  height:50px;
  width:50px;
}
.spin{
  animation:spin 2s linear infinite;
}
@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}
body,html{height:100%;}body{align-items:center;display:flex;justify-content:center;}

<div class="spin"></div>

请注意，我目前使用的机器没有安装任何浏览器，但仍需要为 transform 属性添加前缀。在我的测试中，带前缀的属性被 getComputedStyle 转换为无前缀的属性，但我不确定这是该函数的一个特性，还是因为浏览器不需要带前缀的版本。如果您注意到这在需要 transform 前缀的浏览器中不起作用，那么您将需要提供进一步的回退。下面是经过编辑的 JavaScript 函数，其中包含您可能需要的完整列表:

document.querySelector("div").addEventListener("click",function(){
  var style=window.getComputedStyle(this);
  this.style.transform=style.getPropertyValue("transform")||style.getPropertyValue("-webkit-transform")||style.getPropertyValue("-ms-transform")style.getPropertyValue("-moz-transform")||"initial";
  this.classList.remove("spin");
});