Après avoir fait un article expliquant l’utilisation de animate.css avec jQuery il était bon d’écrire un plugin animateCSS.js permettant d’automatiser la tâche.
Ce plugin prend en argument un tableau JSON où l’on définit l’animation à appliquer, la durée et les fonctions à déclencher au début et à la fin de l’animation. Si l’effet est une entrée, on fait apparaître l’élément avant l’application de l’animation. Si l’effet est une sortie, on fait disparaître l’élément après.
animateCSS.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
( function( $ ) { // Plugin animateCSS, requires animate.css (https://daneden.github.io/animate.css/) $.fn.animateCSS = function( options ) { var defaults = { animation: '', duration: '1s', before: function() {}, after: function() {} } var params = $.extend( true, defaults, options ), animation = params.animation, duration = params.duration, before = params.before, after = params.after; return this.each( function() { if( animation == '' ) { before(); after(); return; } var animationName = 'animated ' + animation; var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; before(); $( this ) .css({ animationDuration: duration }) .addClass( animationName ) .one( animationEnd, function( e ) { e.stopPropagation(); $( this ).removeClass( animationName ); after(); }); }); } })( jQuery ) |
Pour utiliser le plugin avec un effet d’entrée :
|
1 2 3 4 5 6 7 |
var $elem = $( '#elem' ); $elem.animateCSS({ animation: 'bounceIn', // Entrance animation before: function() { $elem.show(); } }); |
Et avec une animation de sortie :
|
1 2 3 4 5 6 7 |
var $elem = $( '#elem' ); $elem.animateCSS({ animation: 'fadeOutUp', // Exit animation after: function() { $elem.hide(); } }); |
Et pour un toggle:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$.fn.toggleAnimate = function( animationIn, animationOut, durationIn, durationOut ) { var animationIn = animationIn || 'zoomIn', animationOut = animationOut || 'fadeOutUp', durationIn = durationIn || '1s', durationOut = durationOut || '1s'; return this.each( function() { var $this = $( this ); if( $( this ).is( ':hidden' ) ) { $( this ).animateCSS({ animation: animationIn, duration: durationIn, before: function() { $this.show(); } }); } else { $( this ).animateCSS({ animation: animationOut, duration: durationOut, after: function() { $this.hide(); } }); } }); } |
Et hop, un petit plugin permettant d’automatiser l’utilisation de animate.css.
