HTML and CSS Reference
In-Depth Information
Finally, we need to define a shared function between the two actions
(DRY) which
executes after the transition (or animation) is complete. For the sake of this demonstration we
can just call it
theCallbackFunction()
(even though it's not technically a callback function). It
will remove an element from the DOM and spit out a message in the console letting us know
that it worked.
// define your callback function, what happens after the transition/animation
function
theCallbackFunction
(
elem
) {
'use strict'
;
// remove the element from the DOM
$
(
elem
).
remove
();
// log out that the transition is done
console
.
log
(
'the transition is complete'
);
}
In the browser, this should work the same way in IE 7 (on the low end) as it does in mobile
Safari or Chrome for Mobile (on the high end). The only difference is under the hood; the
experience never changes for the user. This is a way you can use cutting-edge techniques
without sacrificing the degraded user experience. It also keeps CSS out of your JavaScript,
which was really our goal the whole time.
The Moral Of The Story
You might be asking yourself why we should even bother going through all this work. We wrote
about 60 lines of JavaScript to accomplish the same design aesthetic that could be created
with eight lines of jQuery. Well, no one ever said that keeping clean code and sticking to
progressive enhancement was the easiest thing to do. In fact, it's a lot easier to ignore it
entirely. But as responsible developers, it's our duty to build applications in a way that is
accessible and easily scales to the future. If you want to go that extra mile and create a
seamless user experience as I do, then it's well worth the extra time it takes to dot all the i's
and cross all the t's in a project to create an overall experience that will gracefully degrade and
progressively enhance.
