javascript - 如何在 Div Wrapper 中实现圆形动画

Question

目前我正在修改这个jsfiddle ，但我的问题是我不能让它绕着某个方向转。

  .dice-wrapper {
    position: absolute;
    /* top: 50%; */
    top: 209px;
    right: -9px;
    /* left: 50%; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
}

    @-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

    @-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

    @-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

    @keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-300deg); }
}

这应该是行为

行为说明:它会绕着箭头转一圈，然后原地返回。

这应该只在用户点击按钮时才会动画，而不是无限点击。

Answer 1

如果它应该在发布后停止

动画应该在事件状态下开始。在您的代码中，它不处于事件状态，因此它会在页面加载时启动。当然，当按下另一个按钮时它不能被激活。

尝试修复它:

.dice-wrapper {
    position: absolute;
    /* top: 50%; */
    top: 209px;
    right: -9px;
    /* left: 50%; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper:active { // :active is the pseudo class when mouse is down
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear; /* Opera 12+ */
            animation: myOrbit 4s linear; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */
}
// Keyframes...

当您使用它时，动画将在按下按钮时播放，松开时将停止。

如果发布后不应停止

如果你不想使用JavaScript，那是不可能的。

使用 JavaScript，您的 css 应该是:

.dice-wrapper {
    position: absolute;
    /* top: 50%; */
    top: 209px;
    right: -9px;
    /* left: 50%; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper.pressed { // .pressed class will be added in JavaScript
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear; /* Opera 12+ */
            animation: myOrbit 4s linear; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */
}
// Keyframes...

Note that :active is replaced by .pressed

在 JavaScript 中，在按下时添加 pressed 类(我使用的是 jQuery):

$(".dice-wrapper").click(function(){
    $(this).addClass("pressed"); // Activate the animation
})

如果您想在鼠标按下按钮时启动动画，请将click 替换为mousedown。 您也可以使用另一个按钮。使用 setTimeout 函数停止动画。

$("#button").click(function(){
    $(this).addClass("pressed");
})
setTimeout(function(){
    $(this).removeClass("pressed")
}, 2000); // 2 seconds = 2000 milliseconds