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触发效果;）

Answer 2

你所做的就是删除'。'来自js

中的班级名称

JS：

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

Answer 3

你实际上可以在CSS中完全执行此操作并完全避开javascript（假设目标浏览器支持:target伪类）

:target选择具有由网址的哈希部分指定的ID的元素，例如：http://localhost/#d1将是点击此答案中的链接后的网址。

注意我意识到这意味着动画只会发生一次。因此，如果这是针对可以多次点击链接的情况，请务必使用JS解决方案（尽管我认为您必须删除该类并再次添加它以重新触发动画）

HTML：

<div id="d1">

</div>

<div id="d2">

</div>

<a href="#d1">click me</a>

CSS：

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

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

    /* or #d1:target */
    :target{
        -webkit-animation: spin 0.5s 1 linear;
    }

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

如何通过单击触发css3旋转效果？

3 个答案: