HTML and CSS Reference
In-Depth Information
You might notice that our new
transitionend
event needs a vendor prefix; we're doing a little
browser detection to take care of that. Normally you might detect for the vendor prefix and add
it onto the event name, but in this instance the cases for the syntaxes are a little different, so
we need to get the whole name of the event for each prefix.
In the next step we'll use Modernizr to detect support
, and add our event listeners to each
case (all of this stuff gets added inside the wrapping function):
// detect for css transition support with Modernizr
if
(
Modernizr
.
csstransitions
) {
// add our class on click
$
(
button
).
on
(
'click'
,
function
() {
$
(
elem
).
addClass
(
'fade-out'
);
});
// simulate a callback function with an event listener
elem
.
addEventListener
(
transitionend
,
function
() {
theCallbackFunction
(
elem
);
},
false
);
}
else
{
// set up a normal click/animate listener for unsupported browsers
$
(
button
).
on
(
'click'
,
function
() {
$
(
elem
).
animate
({
'opacity'
:
'0'
},
transitionDuration
,
transitionTimingFunction
,
function
() {
theCallbackFunction
(
elem
);
});
});
// end click event
}
// end support check
