HTML and CSS Reference
In-Depth Information
If Yes, a) set up a click event on the button to add a “fade-out” class to #cube and b) Add
another event listener to catch when the transition is finished so we can time the
execution of a function that will remove #cube from the DOM.
If No, a) Set up a click even on the button to use jQuery's animate() method to manually
fade #cube out and b) Execute a callback function to remove #cube from the DOM.
This process will introduce a new event called transitionend , which will execute at the end
of a CSS transition. It's amazing, FYI. There is also a companion event called animationend ,
which will execute at the end of a CSS animation for more complex interactions.
First thing we need to do is set up our variables in the JavaScript:
( function () {
// set up your variables
var elem = document . getElementById ( 'cube' ),
button = document . getElementById ( 'do-it' ),
transitionTimingFunction = 'linear' ,
transitionDuration = 500 ,
transitionend ;
// set up the syntax of the transitionend event with proper vendor prefixes
if ( $ . browser . webkit ) {
transitionend = 'webkitTransitionEnd' ; // safari & chrome
} else if ( $ . browser . mozilla ) {
transitionend = 'transitionend' ; // firefox
} else if ( $ . browser . opera ) {
transitionend = 'oTransitionEnd' ; // opera
} else {
transitionend = 'transitionend' ; // best guess at the default?
}
//... rest of the code goes here.
})(); // end wrapping function
Search WWH ::




Custom Search