Skip to content

Instantly share code, notes, and snippets.

@cfree cfree/mutator.css Secret
Last active Aug 29, 2015

Embed
What would you like to do?
DOM detection with CSS Animations and JavaScript
/* 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; }
}
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
You can’t perform that action at this time.