-
-
Save cfree/94006d4bb535bac98014 to your computer and use it in GitHub Desktop.
DOM detection with CSS Animations and JavaScript
This file contains 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
/* Add an animation to any file picker added to .photos-container */ | |
.photos-container input[type="file"] { | |
-ms-animation-duration: 0.001s; | |
-ms-animation-name: chooserInserted; | |
-moz-animation-duration: 0.001s; | |
-moz-animation-name: chooserInserted; | |
-webkit-animation-duration: 0.001s; | |
-webkit-animation-name: chooserInserted; | |
-o-animation-duration: 0.001s; | |
-o-animation-name: chooserInserted; | |
animation-duration: 0.001s; | |
animation-name: chooserInserted; | |
} | |
/* Define the animation (short and sweet) */ | |
@-ms-keyframes chooserInserted { | |
from { opacity: 0.99; } | |
to { opacity: 1; } | |
} | |
@-moz-keyframes chooserInserted { | |
from { opacity: 0.99; } | |
to { opacity: 1; } | |
} | |
@-webkit-keyframes chooserInserted { | |
from { opacity: 0.99; } | |
to { opacity: 1; } | |
} | |
@-o-keyframes chooserInserted { | |
from { opacity: 0.99; } | |
to { opacity: 1; } | |
} | |
@keyframes chooserInserted { | |
from { opacity: 0.99; } | |
to { opacity: 1; } | |
} |
This file contains 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
var animationComplete = function(event) { | |
// Is new file picker inserted into .photos-container? | |
if (event.animationName == "chooserInserted") { | |
// Success! Carry on | |
} | |
}; | |
$(document).ready(function() { | |
// Modified from: http://davidwalsh.name/detect-node-insertion | |
// Listen up for animation changes in the document | |
// When heard, call the `addNewFileChooser` function | |
document.addEventListener("animationstart", animationComplete); // standard + firefox | |
document.addEventListener("MSAnimationStart", animationComplete); // IE | |
document.addEventListener("webkitAnimationStart", animationComplete); // Chrome + Safari | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment