JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<div id="test-element"></div>
<textarea id="log" cols="40" rows="5"></textarea>

CSS

#test-element {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: green;
    transition: background-color 1s;
}

JavaScript

function transitionEventName() {
    const fakeElement = document.createElement('fakeElement');
    let supportedTransitionEnd;

    const transitions = {
        /* Первым идет WebkitAnimation, потому что в Android 4.x все проверки проходят */
        WebkitTransition: 'webkitTransitionEnd',
        transition: 'transitionend',
        MozTransition: 'transitionend',
        OTransition: 'oTransitionEnd otransitionend',
    };

    for (const transition in transitions) {
        if (fakeElement.style[transition] !== undefined) {
            supportedTransitionEnd = transitions[transition];
            break;
        }
    }
    
    return supportedTransitionEnd;
}


var testElement = document.getElementById('test-element');
var supportedTransitionEnd = transitionEventName();

var timeoutHandle = setTimeout(function () {
	log.value += supportedTransitionEnd + ' doesn\'t work\n';
}, 2000);

testElement.addEventListener(supportedTransitionEnd, function () {
	clearInterval(timeoutHandle);
	log.value += supportedTransitionEnd + ' works\n';
});

testElement.addEventListener('transitionend', function () {
	log.value += 'transitionend works\n';
});

testElement.style.backgroundColor = 'blue';