Last active
December 17, 2015 18:29
-
-
Save silverwind/5653378 to your computer and use it in GitHub Desktop.
Set a class once the DOM has fully loaded it
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@keyframes nodeInserted { | |
from { clip: rect(1px, auto, auto, auto); } | |
to { clip: rect(0px, auto, auto, auto); } | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$.fn.setClass = function (newclass) { | |
if (Modernizr.cssanimations) { | |
// Set the new class as a data attribute on the matched tag(s) | |
this.css("animation", "nodeInserted 0.001s"); | |
this.data("newclass", newclass); | |
} else { | |
// If we don't support animations, fallback to a simple timeout | |
window.setTimeout(function () { | |
this.attr("class", newclass); | |
}, 30); | |
} | |
return this; | |
}; | |
if (Modernizr.cssanimations) { | |
// Listen for the animation event for our pseudo-animation | |
var listener = function (event) { | |
if (event.animationName === "nodeInserted") { | |
var target = $(event.target); | |
// Set the class stored in the data attribute and clean up | |
target.attr("class", target.data("newclass")); | |
target.removeAttr("data-newclass").removeAttr("style"); | |
} | |
}; | |
document.addEventListener("animationstart", listener, false); | |
document.addEventListener("webkitAnimationStart", listener, false); | |
document.addEventListener("MSAnimationStart", listener, false); | |
document.addEventListener("oanimationstart", listener, false); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment