javascript - 创建一个按钮来启动我的 webkit 动画？

Question

我有一个使用 webkit 旋转的 div 卷轴。我用一个数组填充每个卷轴并随机选择一个获胜者。

问题是我需要一种方法在不刷新页面的情况下再次旋转它吗？我将使用“领取奖品”按钮在单独的数组中记录获奖者/奖品组合，但我没有办法在不刷新(并重新创建所有数组)页面的情况下重新旋转？

我想我只需要重新加载旋转 div？

http://jsfiddle.net/U5HDc/

    <div id="rotate1">
        <div id="ring-1" class="ring">
            <div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(300px); ">
                <script>
                    pick_prize();
                    document.write("<p>" + get_prize() + "</p>");
                </script>

Answer 1

您可以将动画属性附加到类名而不是 ID。这样您就可以通过在#ring-1 和#ring-2 上附加“spin”类以编程方式启动动画:

#ring-1.spin {
    -webkit-animation-name: x-spin-2;
    -webkit-animation-duration: 2s;
}
#ring-2.spin {
    -webkit-animation-name: x-spin;
    -webkit-animation-duration: 1s;
}

开始动画:

$(".ring").addClass('spin');

当动画结束时移除旋转类，以便稍后可以开始另一个动画:

$(".ring").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ $(this).removeClass('spin') });