JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="http://dev.mito.hu/n/vue/dist/vue.js"></script>
<div id="test">This is the test div</div>

<a href="javascript:justhide()">just hide</a>

<a href="javascript:immediate()">immediate</a>

<a href="javascript:delayed(0)">0ms</a>

<a href="javascript:delayed(10)">10ms</a>

<a href="javascript:delayed(50)">50ms</a>

<a href="javascript:delayed(100)">100ms</a>

<a href="javascript:delayed(1000)">1000ms</a>

<a href="javascript:delayed(5000)">5000ms</a>

CSS

#test {
    transition: all 10s ease;
}

.hidden {
    opacity: 0;
}

JavaScript

var element = document.getElementById('test');

element.addEventListener("transitionend", function() {
    console.log('transitionend fired');
}, false);

justhide = function() {
    element.classList.add('hidden');
}

immediate = function() {
    element.classList.add('hidden');
    window.requestAnimationFrame(function() {
        console.log('transition should start now');
    });
    console.log('cancel transition');
    element.classList.remove('hidden');
}

delayed = function(ms) {
    element.classList.add('hidden');
    window.requestAnimationFrame(function() {
        console.log('transition should start now');
    });
    setTimeout(function() {
        console.log('cancel transition');
        element.classList.remove('hidden');
    }, ms)
    /*var target = Date.now() + 1000;
    while (Date.now() < target) {
    }*/
}