javascript - Dynamically create and apply CSS3 animations -
the .animate() function in jquery not allow css3 animatable properties animated (for example, background-color). there nice, standard way dynamically create, apply, , remove css3 animations elements on page?
i'm following example here clunky , feels wrong. while works, rather better solution (using library or that).
yes, can dynamically create, apply , remove css3 animations element in page.
to dynamically create animation, need use insertrule or addrule functions add @keyframes rules , append stylesheet. once animation appended, applying element simple, need set required property value animation property via inline styles. removing agian simple, need set value null when needs removed.
in below snippet, have first inserted animation , applied element on load. when animation starts, element fires animationstart event. within event listener, i've obtained outerhtml of element being animated , printed show how inline style present , @ end of animation (using animationend event listener), i've removed inline style , printed outerhtml after show how no longer has animation.
there no other simpler ways dynamically create css3 animations. possible solutions involve creating , appending @keyframes stylesheets using basic insertrule, addrule or keyframes specific appendrule function (which used append rules existing keyframe).
var elm = document.queryselector('.to-animate'); var op = document.queryselector('.output'); var animname = "shake-up-down", animduration = "3s", animtiming = "linear", animfillmode = "forwards", animiteration = "3"; var ruletext = "0% {transform: translatey(0px);}"; ruletext += "25% {transform: translatey(10px);}"; ruletext += "75% {transform: translatey(-10px);}"; ruletext += "100% {transform: translatey(0px);}"; /* david walsh's blog */ function addcssanimrule(sheet, name, rules, index) { if ("insertrule" in sheet) { sheet.insertrule("@keyframes " + name + "{" + rules + "}", index); } else if ("addrule" in sheet) { sheet.addrule("@keyframes " + name, rules, index); } } /* self written */ function applyanimation(elm, name, duration, timing, iteration, fillmode) { elm.style["animation"] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode; /* or if want set them individually, comment above line , uncomment elm.style["animationname"] = name; elm.style["animationduration"] = duration; elm.style["animationtimingfunction"] = timing; elm.style["animationiterationcount"] = iteration elm.style["animationfillmode"] = fillmode;*/ } addcssanimrule(document.stylesheets[0], animname, ruletext, 0); applyanimation(elm, animname, animduration, animtiming, animiteration, animfillmode); /* print output */ elm.addeventlistener("animationstart", function(e) { op.textcontent = "animation " + e.animationname + " has started."; op.textcontent += "\n\nelement's outer html: \n"; op.textcontent += elm.outerhtml; op.textcontent += "\n\n------------------------------------------------------------------------------"; }); elm.addeventlistener("animationend", function(e) { elm.removeattribute("style"); /* remove animation */ op.textcontent += "\nanimation " + e.animationname + " has ended."; op.textcontent += "\n\nelement's outer html: \n"; op.textcontent += elm.outerhtml; op.textcontent += "\n\n------------------------------------------------------------------------------"; });.to-animate { height: 100px; width: 100px; margin: 10px; border: 1px solid red; }<div class='to-animate'></div> <pre class='output'></pre>this method can used dynamically create , use type of animation. below snippet creates , adds background-color animation.
var elm = document.queryselector('.to-animate'); var op = document.queryselector('.output'); var animname = "bgcolor", animduration = "4s", animtiming = "linear", animfillmode = "forwards", animiteration = "3"; var ruletext = "0% {background-color: red;}"; ruletext += "25% {background-color: orange;}"; ruletext += "50% {background-color: yellow;}"; ruletext += "75% {background-color: pink;}"; ruletext += "100% {background-color: red;}"; /* david walsh's blog */ function addcssanimrule(sheet, name, rules, index) { if ("insertrule" in sheet) { sheet.insertrule("@keyframes " + name + "{" + rules + "}", index); } else if ("addrule" in sheet) { sheet.addrule("@keyframes " + name, rules, index); } } /* self written */ function applyanimation(elm, name, duration, timing, iteration, fillmode) { elm.style["animation"] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode; /* or if want set them individually, comment above line , uncomment elm.style["animationname"] = name; elm.style["animationduration"] = duration; elm.style["animationtimingfunction"] = timing; elm.style["animationiterationcount"] = iteration elm.style["animationfillmode"] = fillmode;*/ } addcssanimrule(document.stylesheets[0], animname, ruletext, 0); applyanimation(elm, animname, animduration, animtiming, animiteration, animfillmode); /* print output */ elm.addeventlistener("animationstart", function(e) { op.textcontent = "animation " + e.animationname + " has started."; op.textcontent += "\n\nelement's outer html: \n"; op.textcontent += elm.outerhtml; op.textcontent += "\n\n------------------------------------------------------------------------------"; }); elm.addeventlistener("animationend", function(e) { elm.removeattribute("style"); /* remove animation */ op.textcontent += "\nanimation " + e.animationname + " has ended."; op.textcontent += "\n\nelement's outer html: \n"; op.textcontent += elm.outerhtml; op.textcontent += "\n\n------------------------------------------------------------------------------"; });.to-animate { height: 100px; width: 100px; margin: 10px; background-color: red; }<div class='to-animate'></div> <pre class='output'></pre>cross browser version:
here cross browser version support older browsers using methods exposed prefix free library. tested in ie10+, edge, chrome v50 (dev-m), firefox v43, opera v35. testing prefixed version done in safari 5.1.7 on win 10.
Comments
Post a Comment