javascript - ASP.NET AJAX--styleSheet.insertRule() not working as expected -
my application generates animations dynamically in server code. element animated, apply animation styles in-line, (the element ids guids letter prefix prevent collision):
<div class="scrollingdiv" style="width: 100%; height: 27px;"> <p id="p9a6960428d594935b2540b1f8466f47a" style="animation:scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite; width: 131px; height: 27px; transform: translatex(640px); -moz-transform: translatex(640px); -webkit-transform: translatex(640px); -moz-animation: scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite; -webkit-animation: scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite;"> test </p> </div>
and assign innerhtml
of container. generate on server side keyframes, so:
@keyframes scroll-p9a6960428d594935b2540b1f8466f47a { 0% { transform: translatex(640px); } 100% { transform: translatex(-131px); } }
and put them in hidden field on form client add style sheet using eli grey's approach in this post.
function pageload(sender, args) { var ostylesheet = document.stylesheets[0]; ostylesheet.insertrule(rule, ostylesheet.cssrules.length); }
i've verified style , rules working in this fiddle it's not working when add them programmatically. can watch in debugger ostylesheet
getting new entry in cssrules
property. ideas either a) why it's not working or b) (better yet) how can debug myself?
i didn't read way bottom of answer cited. turns out have stop restart animation changes style sheet take effect.
Comments
Post a Comment