craigmdennis / animatecss Goto Github PK

View Code? Open in Web Editor NEW

153.0 14.0 48.0 786 KB

jQuery plugin to dynamically apply animate.css animations

License: MIT License

JavaScript 58.05% CoffeeScript 41.95%

animatecss's Introduction

Animate CSS jQuery Plugin

A jQuery plugin to dynamically apply Dan Eden's animate.css animations with callbacks

Getting Started

Bower

Install with Bower bower install animateCSS

Download

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
<script>
$(document).ready( function(){
  $('#your-id').animateCSS("fadeIn");
});
</script>

Documentation

{
  infinite: false, // True or False
  animationClass: "animated", // Can be any class
  delay: 0 // Can be any value (in ms)
  duration: 1000 // Can be any value (in ms)
  callback: // Any function
}

When using infinite: true and a delay, the delay will only occur before the first loop, not on every loop.

Examples

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    console.log('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', {delay: 500});

With delay AND callback

$('#your-id').animateCSS('fadeIn', {
  delay: 1000,
  callback: function(){
    console.log('Boom! Animation Complete');
  }
});

With duration (in ms)

$('#your-id').animateCSS('fadeIn', {duration: 3000});

Chain multiple animations

If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.

$('#your-id').animateCSS('fadeInUp', function() {
  console.log('Boom! First animation Complete');
  $(this).animateCSS("fadeOutUp", function(){
    console.log('Boom Boom! Second animation Complete');
  })
});

Offset animations

You can offset animations by using the delay mechanism

$('#your-id').animateCSS('fadeIn');
$('#another-id').animateCSS('fadeIn', {delay:100});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

.js #your-id {
  visibility:hidden;
}

$(window).load( function(){
  $('#your-id').animateCSS('fadeIn', function(){
    console.log('Boom! Animation Complete');
  });
});

Release History

Please consult the official changelog

animatecss's People

Contributors

Stargazers

Watchers

animatecss's Issues

Add Gruntfile.js

This will allow consistent minification and contribution.

Could you add visual examples?

In reamde, it's good if you added DEMO, like this:
https://codepen.io/strapro/pen/dIqAH

Prevent the event from bubbling

@martingg88 Could you outline the issue that PR #19 was solving.

Firefox issue..

I got issue with FF and it's look like the problem came from the CSS version.
Sorry my bald.

Please provide npm package

bower is great, but please don't forget npm users ;-)

Using animations in callbacks causes animations to repeat

You can see a pen evidencing the behavior here:

https://codepen.io/Saeven/pen/OxgPzZ

Apologize if I am doing something wrong, seems like I'm following the guidelines though!

Three undocumented lines!

if (!$("html").hasClass("csstransforms")) {

        onEnd();

    }

these lines (63-67) cause animation to stop immediately.

Allow change in speed rather than adding a delay

Instead of using the number to determine the a delay, use it to control the 'speed' of an animation.

Stopping current animated and start a different one.

Hi Is there any way to stop current running animations and start a different one. i.e.
I am animating a block out on a keypress but on another keypress before the first animation has finished I want to start a new animation that returns the bock to the initial position.

AMDfied

Require.js compatible

/*! animateCSS - v1.1.5 - 2014-05-27
* https://github.com/craigmdennis/animateCSS
* Copyright (c) 2014 Craig Dennis; Licensed MIT */


+(function (factory) {
	if (typeof define === "function" && define.amd) {		
		define(["jquery"], factory);
	} else {

		// Browser globals
		factory(jQuery);
	}
}(function ($) {
	'use strict';
   
	$.fn.extend({
		animateCSS: function(effect, options) {
			var addClass, animate, callback, complete, init, removeClass, settings, transitionEnd, unhide;
			settings = {
				effect: effect,
				delay: 0,
				animationClass: 'animated',
				infinite: false,
				callback: options,
				debug: false
			};
			transitionEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
			settings = $.extend(settings, options);
			init = function(element) {
				return animate(element);
			};
			animate = function(element) {
				if (settings.infinite === true) {
					settings.animationClass += ' infinite';
				}
				return setTimeout(function() {
					unhide(element);
					addClass(element);
					return complete(element);
				}, settings.delay);
			};
			addClass = function(element) {
				return element.addClass(settings.effect + ' ' + settings.animationClass + ' ');
			};
			unhide = function(element) {
				if (element.css('visibility') === 'hidden') {
					element.css('visibility', 'visible');
				}
				if (element.is(':hidden')) {
					return element.show();
				}
			};
			removeClass = function(element) {
				return element.removeClass(settings.effect + ' ' + settings.animationClass);
			};
			callback = function(element) {
				if (settings.infinite === false) {
					removeClass(element);
				}
				if (typeof settings.callback === 'function') {
					return settings.callback.call(element);
				}
			};
			complete = function(element) {
				return element.one(transitionEnd, function() {
					return callback(element);
				});
			};
			return this.each(function() {
				return init($(this));
			});
		}
	});

}))