We need to remove the shake class once the animation is done, so that the
animation occurs on subsequent form submissions. The animationEnd() event
lets us run code when the animation is done, so we need to define an event
handler for that. Unfortunately, we have vendor prefixes for these events as
well, so we have to cover our bases.css3_animation/javascripts/form.js
varaddAnimationEndListener=function(){
$(".login").on
("webkitAnimationEndoanimationendmsAnimationEndanimationend",
function(event){
$(this).removeClass("shake");
});
};Finally, we call the methods that add the listeners:
css3_animation/javascripts/form.js
addFormSubmitWithCSSAnimation();
addAnimationEndListener();And now when we click the Submit button, our request fails and the form
shakes. We could’ve done this JavaScript code in one large function, but by
breaking it up and using promises, we’ve made it much easier to add support
for browsers that don’t support animations.Falling Back
The best way to make these transitions and animations work is with a jQuery
fallback. We’ll need both jQuery and the jQuery Color plug-in, and since we’ll
need entirely different behaviors for those browsers, we’ll use Modernizr to
detect support and invoke the appropriate code.First we add Modernizr to the <head> section of the page, using the same
version we used in Detecting Features with Modernizr, on page 47, which
includes the load() function.css3_animation/index.html
<scriptsrc="javascripts/modernizr.js"></script>Then we download the jQuery Color plug-in and place it in the javascripts folder.
We need this plug-in to do animations on colors.^10Now let’s get into the actual fallbacks.
10.http://code.jquery.com/color/jquery.color-2.1.2.min.jsChapter 8. Eye Candy • 176
Download from Wow! eBook <www.wowebook.com> report erratum • discuss