JSFiddle - React, Tailwind, and code Playground

by deadlyicon

HTML

<button>Go!</button>

CSS

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

JavaScript

function delay(time, f){
    setTimeout(f, time);
}

$(function(){
    $('button').on('click', go);
});

function go(){
    var thing = $('<div class="thing">this is <button>a button</button> for you</div>');
    thing.addClass('example-enter');
    thing.appendTo(document.body);

    setTimeout(function(){
        thing.addClass('example-enter-active');
            thing.find('button').focus();
    });
};