Learn Bootstrap by Maria Antonietta Perna

Author:Maria Antonietta Perna [Various]
Language: eng
Format: epub
Publisher: SitePoint
Published: 2017-08-08T23:00:00+00:00

Looking into the doAnimations() Function

The doAnimations() function performs the tasks described below.

It starts by caching a string in a variable containing the name of the animationend event. This event fires, you might have guessed, when each animation ends. You need this bit of information because each time the animation ends, you need to remove the Animate.css classes. Failing to do this, the carousel captions will be animated only once, that is, just the first time the carousel shows a particular slide.

var animEndEv = 'webkitAnimationEnd animationend';

Next, the function loops over each element you want to animate and extracts the value of the data-animation attribute. As you recall, this value contains the Animate.css classes that you need to add to the elements inside the carousel in order to animate them.

elems.each(function () { var $this = $(this), $animationType = $this.data('animation'); // etc... });

Finally, the doAnimations() function dynamically adds the Animate.css classes to each element that you want to animate. It also attaches an event listener that fires only once, when the animation ends. After the animation ends, the Animate.css classes that you just added are removed. This ensures that the next time the carousel comes back to the same slide, the animations take place again. (Try removing this bit of code and you’ll see the animations happen only once.)

$this.addClass($animationType).one(animEndEv, function () { $this.removeClass($animationType); });

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.