JSFiddle - React, Tailwind, and code Playground

by m_gol

HTML

<div id="div"></div>

CSS

#div {
    -webkit-transition: top 0.5s;
    transition: top 0.5s;
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: green;
}
.no-transitions {
    -webkit-transition: none !important;
    transition: none !important;
}

JavaScript

var state = 1;
var div = document.getElementById('div');
var events = ['webkitTransitionEnd', 'transitionend'];

function removeListeners() {
    for (var i = 0; i < 2; i++) {
        div.removeEventListener(events[i], callback, false);
    }
}

function callback() {
    removeListeners();
    div.className = 'no-transitions';
    div.style.top = '';
    setTimeout(function () {
        div.className = '';
    }, 0);
}

document.addEventListener('click', function () {
    state = 1 - state;
    switch (state) {
        case 0:
            removeListeners();
            div.className = 'no-transitions';
            div.style.top = (window.innerHeight - 50) + 'px';
            setTimeout(function () {
                div.className = '';
            }, 0);
            setTimeout(function () {
                div.style.top = '50px';
            }, 50);
            break;

        default:
            removeListeners();
            for (var i = 0; i < 2; i++) {
                div.addEventListener(events[i], callback, false);
            }
            div.style.top = (window.innerHeight - 50) + 'px';
    }
});