CODEWITHSUNDEEP
javascripthtmlcsswebkit
user2733971
user2733971

Reputation: 191

Creating a button to start my webkit animation?

I have a reel of divs rotating using webkit. I populate each reel with an array and randomly select a winner.

The problem is I need a way to spin this again without refreshing the page? I'll be recording the winner/prize combinations in a separate array using a "claim prize" button, but I don't have a way to respin without refreshing (and recreating all the arrays) the page?

I think I just need to reload the spin 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>

Upvotes: 0

Views: 61

Answers (1)

Ali Hasan
Ali Hasan

Reputation: 36

You could attach the animation properties to a class name instead of the ids. That way you can programmatically kick off the animation by attaching the "spin" class on #ring-1 and #ring-2:

#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;
}

Kick off animation:

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

Remove the spin class when the animation ends, so that you can kick off another animation later:

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

Upvotes: 1

Related Questions