NotifyCss

Notify CSS animation/transition events

GOAL:

Provide a simple way of adding/removing event listeners for CSS animation/transition.

Live demo

Build Requires:

• NodeJs
• Gulp

Installation

 $ npm install notifycss --save-dev

Gulp Tasks

gulp default (runs on local server)
 
gulp deploy (deploys ES6 version)
 
gulp transpiled (deploys transpiled version)

Testing:

npm test

Package contains two files:

dist/notifycss.js (ES6)
dist/notifycss-transpiled.js (ES5/transpiled)

Ways to import

//ES6
import notifyCss from './notifycss';
 
//CommonJS
var notifyCss = require('notifycss-transpiled.js');
 
//inline script
<script src="notifycss-transpiled.js"></script>

CSS Demo

button {
    opacity:0;
    transition: opacity .3s;
}

h1 {
    animation:animationShow .5s 1 forwards cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes animationShow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Usage ES6

import NotifyCss from './notifycss';
 
//setup
let notifyCss = new NotifyCss();
 
//DOM element
let elm = document.getElementsByClassName('any-selector')[0];
 
//add transition listener to an DOM element
notifyCss.transitionEnd(elm, () => {
    console.log('transition complete');
});
 
//add animation listener to any animation on the element
notifyCss.animationEnd(elm, (e) => {
    console.log('animation complete');
});
 
//add animation listener to a specific animation by name
notifyCss.animationEnd(elm, (e) => {
    console.log('animation complete');
}, 'animationName');
 
//remove transition listener from the element
notifyCss.removeTransitionListener(elm);
 
//remove animation listener from the element
notifyCss.removeAnimationListener(elm);
 

Usage (Transpiled)

//setup
var notifyCss = new NotifyCss();
 
//DOM element
var elm = document.getElementsByClassName('any-selector')[0];
 
//add transition listener to an DOM element
notifyCss.transitionEnd(elm, function() {
    console.log('transition complete');
});
 
//add animation listener to any animation on the element
notifyCss.animationEnd(elm, function() {
    console.log('animation complete');
});
 
//add animation listener to a specific animation by name
notifyCss.animationEnd(elm, function() {
    console.log('animation complete');
}, 'animationName');
 
//remove transition listener from the element
notifyCss.removeTransitionListener(elm);
 
//remove animation listener from the element
notifyCss.removeAnimationListener(elm);