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