jquery-css-mahoro

jQuery plugin for managing CSS animations in a simple way.

What is does

CSS Mahoro adds/removes CSS animation classes for you at the right time

1. Adds CSS animation class
2. CSS animation running
3. Removes CSS animation class

Usage

Example below are the usage with Animate.css. You can use any CSS animation as long as it triggers CSS animation on the element.

Basic

$(...).cssMahoro('animated bounce');

Chaining animations with promise

// Chaining animations with promise
$(...).cssMahoro('animated bounce')
.then(function (elm) {
  return $(elm).cssMahoro('animated flash');
})
.then(function () {
  return $.when(
    $(...).cssMahoro('animated fadeIn'),
    $(...).cssMahoro('animated fadeOut')
  );
});

Hide

// For CSS animation that hides element
$(visibleElement).cssMahoro('animated fadeOut', { hide: true });

Show

// For CSS animation that shows element
// default display is `block`
$(hiddenElement).cssMahoro('animated fadeIn', { show: true });
 
// Custom `display` property
$(hiddenElement).cssMahoro('animated fadeIn', { show: 'inline-block' })

Install

NPM

npm install jquery-css-mahoro

CDN

CSS Mahoro uses unpkg.

<script src="https://unpkg.com/jquery-css-mahoro/dist/jquery.css-mahoro.min.js"></script>

License

jquery-css-mahoro is licensed under the MIT license. (http://opensource.org/licenses/MIT)