css3 animation on click with javascript

Question

I need to animate several items at the same time, several times on click. I'm not allowed to use Jquery so I'm working with native javascript and CSS3.

Array.prototype.forEach.call(els, function(el) {
    elemId = el.getAttribute("id");

    var toWidth = boxPos[thisId][elemId].width;
    var toHeight = boxPos[thisId][elemId].height;
    var toTop = boxPos[thisId][elemId].top;
    var toLeft = boxPos[thisId][elemId].left;           
    var from = "0% {width:"+currPos[elemId].width+"; height:"+currPos[elemId].height+"; top:"+currPos[elemId].top+"; left:"+currPos[elemId].left+";}";
    var to = "100% { width:"+toWidth+"; height:"+toHeight+"; top:"+toTop+"; left:"+toLeft+";}";
    currPos[elemId].width = toWidth;
    currPos[elemId].height = toHeight;
    currPos[elemId].top = toTop;
    currPos[elemId].left = toLeft;

    var styleSheets = document.styleSheets;
    for (var i = 0; i < styleSheets.length; ++i) {
        for (var j = 0; j < styleSheets[i].cssRules.length; ++j) {
            if (styleSheets[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && styleSheets[i].cssRules[j].name == elemId){
                keyframes = styleSheets[i].cssRules[j];

            }
        }
    }
    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");

    keyframes.insertRule(from);
    keyframes.insertRule(to);
    el.style.webkitAnimationName = elemId;
});

I've searched around the site and have tried using some of the code. The animation will run once, all the elements but just the first time :'(

Here's a non working example code http://jsfiddle.net/kR384/2/

Please also show us how you are attaching the click handlers and how the click handler invokes this animation. — Bergi
– Bergi, Commented Jun 25, 2013 at 0:22
hey @Bergi, just added the full code, only the 10 and 7 box is clickable, I should be able to click one after the other the animation just runs once — chrysillo
– chrysillo, Commented Jun 25, 2013 at 16:15
Seems to be a duplicate of How do I re-trigger a WebKit CSS animation via JavaScript? — Bergi
– Bergi, Commented Jun 25, 2013 at 17:30

Bergi · Accepted Answer · 2013-06-25 17:28:01Z

1

The animation will run once, all the elements but just the first time

You seem to be looking for the animation-iteration-count CSS property, which specifies how often an animation will run. You can set it to infinite or any numerical (positive) value.

The problem you have with your animations is that they are only started on the first click. After that, you don't change the element's styles (reassigning the animation-name doesn't help) - so no animation will get triggered (even if you changed the keyframes rules). The article at http://css-tricks.com/restart-css-animation/ discusses this and a few solutions.

In your case it would even make sense to change the name of animation to something containing the "state":

     if( …cssRules[j].name.split("-")[0] == elemId)
         keyframes = styleSheets[i].cssRules[j];
…


var newname = elemId+"-"+thisId;
keyframes.name = newname;
…
el.style.animationName = newname;

(Demo with standard properties and a few bugfixes, updated demo with webkit prefixes)

edited Jun 25, 2013 at 17:28

answered Jun 24, 2013 at 23:51

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

chrysillo Over a year ago

actually I have the animation set to -webkit-animation:all 0.5s forwards;. I'm afraid that if I set it to infinite the first round of animations will just loop, and won't work for me since the animations will change for every iteration

Bergi Over a year ago

Sorry, I'm not sure what you are asking for then. Where is that "next iteration" in your code that changes the animations?

chrysillo Over a year ago

on every iteration the variables from and to change with values coming from an array (width,height,top,left).

Bergi Over a year ago

And how are these iterations timed? Or do you just run them together and expect them to be queued as in jQuery?

chrysillo Over a year ago

Sorry for my poor explanation. They happen onclick, when I click on one item all other items should animate in a certain way, when I click on another item, all shall animate on a different way and so forth.

|

Bergi · Accepted Answer · 2013-06-25 17:33:02Z

0

I was able to fix it just by adding a setTimeout(0) to call the animation after the animation name was set to none.

Here's the fixed code http://jsfiddle.net/kR384/3/:

function resetAndRun(o){
    one.style.webkitAnimationName = "none";
    …
    ten.style.webkitAnimationName = "none";
    setTimeout(function(){o.animateBox();}, 0); 
}

I hope it's useful for someone.

edited Jun 25, 2013 at 17:33

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Jun 25, 2013 at 17:22

chrysillo

7392 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

css3 animation on click with javascript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related