Question

我正在做的是我周围有一个小圆圈的大圆圈。所有这些都在div中，我正在旋转那个div。

当我将鼠标悬停在该div上时，我暂停旋转，接下来我要做的是根据点击的小圆圈进行自定义旋转。例如单击第1个圆，旋转30度，第2个旋转60度，依此类推。不知怎的，我无法进行自定义旋转。以下是我的代码片段以获取更多信息。

HTML

<div class='mcA_icon_wrap playing'>
  <div class='mcA_icon_wrap_inner'>

        <ul>
            <li><div class='mcA_icon' id='mcA_icon_1'></div></li>
            <li><div class='mcA_icon' id='mcA_icon_2'></div></li>
            <li><div class='mcA_icon' id='mcA_icon_3'></div></li>       
        </ul>

        <div id='big_circle'>
            <img src='images/big_circle.png'/>
        </div>

  </div>
</div>

CSS

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

.mcA_icon_wrap  {
-ms-animation: r 15s infinite linear;
-moz-animation: r 15s infinite linear;
-webkit-animation: r 15s infinite linear;
 animation: r 15s infinite linear; 
 }

.mcA_icon_wrap.playing {
-ms-animation-play-state: running;
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
animation-play-state: running;
}

.mcA_icon_wrap.paused {
-ms-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
 animation-play-state: paused;
 }

JS

$(".mcA_icon_wrap").mouseenter(function() {
    $(this).toggleClass("playing paused");
}).mouseleave(function() {
    $(this).toggleClass("paused playing");
});

$(".mcA_icon").on("click", function() {
    var id = $(this).attr('id');
    var idNum = id.split("_");
    var x = parseInt(idNum[2]) * 30;
    $(".mcA_icon_wrap").css({"-webkit-transform": "rotate("+ x +"deg)"});
});

“$（”。mcA_icon_wrap“）。css（{” - webkit-transform“：”rotate（“+ x +”deg）“}）;”不管用。

鼠标离开div后，我希望它继续旋转。感谢任何可以提供帮助的人。

Answer 1

您无法旋转已旋转的元素。您必须根据当前轮换停止当前动画并开始一个新动画。

更简单的方法是分离旋转，就像在this example I made上一样。这样外部元素随着过渡而旋转，内部元素具有无限动画。您可以在js上设置旋转，在css上设置转换：

.mcA_icon_wrap  {
    ...
    -webkit-transition: transform 1s;
}

另外，如果您想对同一元素应用多个动画，请考虑使用GSAP等

这样的javascript库

在旋转时自定义旋转div

1 个答案: