AnimateCSS : plugin pour jQuery

Mar 18, 2017 | CSS, JavaScript / jQuery | 0 commentaire

Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément obsolète.

AnimateCSS

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.

animate.css
animate.css

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.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.