Animate.css Dynamic Method

animator.js

// Usage:
// animator(
//     document.getElementsByClassName('init-btn'),
//     'bounce'
// )
const animator = (
                    element, 
                    animation, 
                    speed = '', 
                    delay = '', 
                    selfDestruction = true, 
                    callback = undefined
                ) => {
    const isNullorUndefined = str => {
            return (!str || 0 === str.length)
    }
    let 
        animations = {
            bounce: 'bounce',
            flash: 'flash',
            pulse: 'pulse',
            rubberBand: 'rubberBand',
            shake: 'shake',
            headShake: 'headShake',
            swing: 'swing',
            tada: 'tada',
            wobble: 'wobble',
            jello: 'jello',
            bounceIn: 'bounceIn',
            bounceInDown: 'bounceInDown',
            bounceInLeft: 'bounceInLeft',
            bounceInRight: 'bounceInRight',
            bounceInUp: 'bounceInUp',
            bounceOut: 'bounceOut',
            bounceOutDown: 'bounceOutDown',
            bounceOutLeft: 'bounceOutLeft',
            bounceOutRight: 'bounceOutRight',
            bounceOutUp: 'bounceOutUp',
            fadeIn: 'fadeIn',
            fadeInDown: 'fadeInDown',
            fadeInDownBig: 'fadeInDownBig',
            fadeInLeft: 'fadeInLeft',
            fadeInLeftBig: 'fadeInLeftBig',
            fadeInRight: 'fadeInRight',
            fadeInRightBig: 'fadeInRightBig',
            fadeInUp: 'fadeInUp',
            fadeInUpBig: 'fadeInUpBig',
            fadeOut: 'fadeOut',
            fadeOutDown: 'fadeOutDown',
            fadeOutDownBig: 'fadeOutDownBig',
            fadeOutLeft: 'fadeOutLeft',
            fadeOutLeftBig: 'fadeOutLeftBig',
            fadeOutRight: 'fadeOutRight',
            fadeOutRightBig: 'fadeOutRightBig',
            fadeOutUp: 'fadeOutUp',
            fadeOutUpBig: 'fadeOutUpBig',
            flipInX: 'flipInX',
            flipInY: 'flipInY',
            flipOutX: 'flipOutX',
            flipOutY: 'flipOutY',
            lightSpeedIn: 'lightSpeedIn',
            lightSpeedOut: 'lightSpeedOut',
            rotateIn: 'rotateIn',
            rotateInDownLeft: 'rotateInDownLeft',
            rotateInDownRight: 'rotateInDownRight',
            rotateInUpLeft: 'rotateInUpLeft',
            rotateInUpRight: 'rotateInUpRight',
            rotateOut: 'rotateOut',
            rotateOutDownLeft: 'rotateOutDownLeft',
            rotateOutDownRight: 'rotateOutDownRight',
            rotateOutUpLeft: 'rotateOutUpLeft',
            rotateOutUpRight: 'rotateOutUpRight',
            hinge: 'hinge',
            jackInTheBox: 'jackInTheBox',
            rollIn: 'rollIn',
            rollOut: 'rollOut',
            zoomIn: 'zoomIn',
            zoomInDown: 'zoomInDown',
            zoomInLeft: 'zoomInLeft',
            zoomInRight: 'zoomInRight',
            zoomInUp: 'zoomInUp',
            zoomOut: 'zoomOut',
            zoomOutDown: 'zoomOutDown',
            zoomOutLeft: 'zoomOutLeft',
            zoomOutRight: 'zoomOutRight',
            zoomOutUp: 'zoomOutUp',
            slideInDown: 'slideInDown',
            slideInLeft: 'slideInLeft',
            slideInRight: 'slideInRight',
            slideInUp: 'slideInUp',
            slideOutDown: 'slideOutDown',
            slideOutLeft: 'slideOutLeft',
            slideOutRight: 'slideOutRight',
            slideOutUp: 'slideOutUp',
            heartBeat: 'heartBeat',
            _blur: '_blur',
        },
        animEndEvent = [],
        animationEnds = {
            animation: 'animationend',
            OAnimation: 'oAnimationEnd',
            MozAnimation: 'mozAnimationEnd',
            WebkitAnimation: 'webkitAnimationEnd',
        },
        selectedAnimation = []
    
    console.log(element)
    
    selectedAnimation.push('animated')
    selectedAnimation.push(animations[animation])
    isNullorUndefined(speed) ? void 0 : selectedAnimation.push(speed)
    isNullorUndefined(delay) ? void 0 : selectedAnimation.push(delay)

    for (var t in animationEnds) {
        if (element[0] !== undefined) {
            if (element[0].style[t] !== undefined) {
                animEndEvent.push(animationEnds[t])
            }
        }
    }

    element[0].classList.add(...selectedAnimation)

    animEndEvent.forEach( (animEvent, index) => {
        element[0].addEventListener(animEvent, () => {
            // console.log(animEvent)
            if (selfDestruction) {
                element[0].classList.remove(...selectedAnimation)
            }
            if ( callback != undefined ) {
                callback()
            }
            element[0].removeEventListener(animEvent, this)
        })
    })

}
export default animator