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

How to trigger css3 rotate effect by clicking?

本文关键字：css3 旋转 何通过      更新时间：2023-09-26

我有两个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>

这是演示页面。我知道这个问题应该在js中，有人能告诉我如何修改它吗？

当我移除. 时，它正在工作

但当我点击链接时，它只起作用一次。我该怎么解决？

如果你的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中以触发效果；）

您所要做的只是删除"."来自js 中的类名

JS:

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

实际上，您可以完全在CSS中做到这一点，并完全避开javascript（假设目标浏览器支持:target伪类）

:target选择哪个元素的ID由url的哈希部分指定，例如：http://localhost/#d1将是单击此答案中的链接后的url。

注意我意识到这意味着动画只会发生一次。因此，如果这是针对链接可以被多次点击的情况，那么一定要使用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);}   
    }
相关文章：