Javascript: Есть ли событие начала перехода в CSS?

Ответ 1

Нет, еще нет. (повторяет комментарий Фредерика Хамиди.)

Рассмотрите возможность трансляции своего собственного события с помощью агрегатора событий, медиатора или pub/sub. Все они означают в основном одно и то же: вместо того, чтобы ждать спецификаций событий DOM/CSS JavaScript, чтобы догнать ваши потребности, создайте собственную глобальную/почти глобальную систему управления событиями или используйте пользовательские события в любой среде событий, которую вы уже используете.

Например, вы можете использовать пользовательские события jQuery:

// Transition target (body, for example)
var $body = jQuery(document.body);

// Register our transition starting function (left as exercise)
$body.on('transition_start', startFunction);

// Start the transition...
$body.addClass('transitioning')
    // ... and let everyone know
    .trigger('transition_start');`

Ответ 2

ОБНОВЛЕНИЕ: transitionstart и transitioncancel находятся в спецификации CSS Transitions 2, которые в настоящее время разрабатываются в статусе проекта проекта.

Если вы не знали, transitionstart реализован в Internet Explorer 10 и выше. Это не в какой-либо спецификации и, таким образом, является нестандартной функцией. Я бы предположил, что это неприступно и, как правило, безопасно использовать, так как это будет реализовано, когда (или если) окажется в спецификации - возможно, вы могли бы сделать такое условие:

if ("transitionstart" in window) { 
    object.addEventListener("transitionstart", function() { 
        // IE 10 + and Edge
    });
}
else { 
    // fallback
}

Единственный вид "обсуждения", который я мог найти по этой проблеме, - это this, отправленная почтой в W3C by @Daniel Trebbien с вопросом о возможность включения в спецификацию новых событий перехода, таких как transitionstart и transitioncancel. Он даже не получил ответа от кого-то, что очень грустно.