KPC
Kevin Powell - Community•2w ago
Axim

Add several animations

Im trying to add several animations to an element by using JS because it's a dynamic element, the problem is the element.style.animation apparently only allows one declaration I cant add by using string concatenation like this : 
js element.style.animation += "my_other_animation 1s ease-out"
js element.style.animation += "my_other_animation 1s ease-out"
I also can't declare them both (comma separated) because one is added when dragging and the other when the element is created. Since the declaration above takes precedence the other one is overwritten so how to add several animations ? I thought maybe adding custom props for each animation and adding class with both animations declared using the custom props? but Is there a way in JS ?? thx fiddle here : https://jsfiddle.net/dhea7rqk/1/
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
2 Replies
dys 🐙
dys 🐙•2w ago
Put a comma before your concatenation: 
el.style.animation += ", rotate_element .25s ease-out"
el.style.animation += ", rotate_element .25s ease-out"
Axim
AximOP•2w ago
I could swear that I already tried it but didnt work, but now just re-trying and it does ,in fact, work lol. Thanks a lot dude you saved me some time !!

Did you find this page helpful?