javascript - 如何通过点击触发css3旋转效果？

Question

我有两个 div。一个应用旋转效果，另一个通过点击触发。

$(function() {
  $("a").click(function() {
    $("#d1").addClass(".spinEffect");
  });
});

#d1,
#d2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px 50px 50px 50px;
}

#d2 {
  background-color: green;
  -webkit-animation: spin 10s infinite linear;
}

.spinEffect {
  -webkit-animation: spin 0.5s 1 linear;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
</div>
<div id="d2">
</div>
<a href=#>click me</a>

Here是演示页面。我知道问题应该出在js上，有人可以告诉我如何修改它吗？

当我删除 时它就可以工作。

但是当我点击链接时，它只能工作一次。我该如何解决这个问题？

Answer 1

您的 addClass 附近有错误，您应该输入 $("#d1").addClass("spinEffect"); 而不是 ".spinEffect"， . 在那里没用;)

对于你的第二个问题，只需在你的CSS中添加infinite

.spinEffect{
  -webkit-animation: spin 0.5s infinite linear;
}

<小时/>

编辑

如果你想让盒子在每次点击按钮时转动一次，可以通过以下方法实现

$(function(){
  $("a").click(function(){
    var $d1 = $("#d1"); //little optimization because we will use it more than once
    $d1.removeClass("spinEffect");
    setTimeout(function(){$d1.addClass("spinEffect")},0);
  });
});

你可能会问为什么要设置setTimeout，因为否则的话，类会被重新添加，以便CSS能够快速触发效果;)