JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<button>Alert</button>
<div class="hidden erorr">Erorr</div>
<div class="hidden done">Done</div>
<div class="hidden thank">Thank you</div>

CSS

div{
    position: fixed;
    left: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: block;
    bottom: 20px;
    padding: 30px;
}

.hidden{
    display:none;
}

body{
    background: #EEE
}

JavaScript

function alertPop($$pop,$$delay,$$in,$$out,$$btn){
    $($$btn).attr('disabled','disabled');
    $($$pop).removeClass('hidden').addClass('animated ' + $$in).delay($$delay).queue(function(){
        $(this).removeClass($$in);
        $(this).addClass($$out).dequeue();
        $($$btn).removeAttr('disabled');
    });
}

$('button').on('click',function(){
    $$pop = 'div.erorr',
    $$in = 'fadeInUpBig',
    $$out = 'fadeOutDownBig';
    
    if($($$pop).hasClass('animated')){
        $($$pop).removeClass('animated ' + $$in + ' ' + $$out).addClass('hidden');
    }
    alertPop($$pop,2000,$$in,$$out,'button');
});