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');

动画结束时移除 spin 类，以便稍后启动另一个动画：

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