Почему событие transitionend вызывается раньше завершения css transition?

Question

[tuxx]

Дано самописное простейшее модальное окно, которое должно через transition из fullscreen состояния уменьшится до заданого размера, а далее с ним может произойти всякое.
Через jQuery удаляю класс ответственный за увеличение окна в полный размер и оно начинает уменьшение. На блок предварительно навешено через функцию jqury one событие transitionend (с вариациями для всех браузеров), но почему-то срабатывает раньше чем завершается transition, т.е., например по console.time(), transiton-duration задано как 2,5 секунды, а событие срабатывает уже через 1,1-1,3 секунды.

примерная реализация:

const TRANSITIONEND = 'transitionend MSTransitionEnd msTransitionEnd webkitTransitionEnd oTransitionEnd otransitionend';

$modal.find('.close').on('click', function(e) {
        console.time('close');

        e.preventDefault();
        e.stopPropagation();
       
        // тут пересчитвается уменьшенный размер модального окна в которое должно уменьшиться через transition
       // задаются width, height, top, left 
        
        $modal.one(TRANSITIONEND, function(e) {
            console.log('close. transitionend', Math.random());

            $modal.off(TRANSITIONEND);
            $modal.removeClass('show');

            console.timeEnd('close');
        });
        $modal.removeClass('fullscreen');
    });

Answer 1

[tuxx]

На данный момент решаю проблему через setTimeout:

let duration = parseFloat($modal.css('transition-duration'));
setTimeout(function() {
// сделать что-то после css transition
}, duration * 1000);