in-out-transitioner

Easily transition elements in and out with CSS

Install

$ npm install in-out-transitioner

Usage

import createTransition from 'in-out-transitioner';

const element = document.getElementById('element');

const transitioner = createTransition(element, {
    // default: element
    container: document.getElementById('container'),
    enterFromClass: 'enter-from',
    enterActiveClass: 'enter-active',
    enterToClass: 'enter-to',
    leaveFromClass: 'leave-from',
    leaveActiveClass: 'leave-active',
    leaveToClass: 'leave-to',
    onBeforeEnter: () => {},
    onEnter: () => {},
    onAfterEnter: () => {},
    onEnterCancelled: () => {},
    onBeforeLeave: () => {},
    onLeave: () => {},
    onAfterLeave: () => {},
    onLeaveCancelled: () => {},
});

element.addEventListener('click', () => {
    transitioner.isEntering() || transitioner.isEntered()
        ? transitioner.leave()
        : transitioner.enter();
});