Состояние гонки с переходами CSS и событием перехода - Не удается найти решение

Question

Я думаю, что большинство из вас знает, что вы не можете инициировать переход сразу после добавления элемента в DOM без запроса вычисленных стилей. Хорошо, я понял, и эта проблема как-то связана.

Мне просто нужно полагаться на событие перехода JS для удаления элемента из DOM после завершения перехода (эффект постепенного уменьшения). Проблема в том, что добавление класса CSS и его удаление (без таймеров) не инициируют переход, поэтому событие никогда не запускается, позволяя элементу оставаться на DOM навсегда.

Я даже попытался использовать setTimeout (f, 0) и requestAnimationFrame (f), чтобы удалить класс после сложения и начать переход, но не повезло. Я даже комбинировал вызовы getComputedStyle для запуска перерисовки до и после добавления/удаления класса. Еще не повезло.

Например: http://jsfiddle.net/demian85/oprn9jzk/1/

var button = document.querySelector('button'); 

button.addEventListener('transitionend', function(e) { // this never gets called 
    console.log(e); 
    button.parentNode.removeChild(button); 
}); 

button.classList.add('hover'); 
button.clientWidth; 
button.classList.remove('hover'); 

только некрасиво решение, которое я нашел, чтобы использовать SetTimeout с, по меньшей мере, 50 мс задержки. Но мы используем тестовую среду, которая должна ждать 50 мс, прежде чем взаимодействовать с DOM, и это не является жизнеспособным решением.

Кто-нибудь знает, как я могу справиться с этой ситуацией? Почему нет какого-либо события перехода?

pd: проверено в Хром 39

Спасибо.

Answer 1

ОК, я думаю, что теперь я понимаю ваши требования: вы используете класс hover в своем примере кода, но я предполагаю, что на самом деле вы хотите использовать псевдо-класс hover для запуска перехода на постепенный переход. Но вы беспокоитесь о том, что, если пользователь уйдет очень быстро (< 50 мс), событие перехода не будет отправлено.

Ответ не использовать: наведите указатель мыши. Вместо этого добавьте прослушиватель мыши и вручную добавьте класс, который вызывает переход затухания, и не удаляйте его. Таким образом, переход на постепенное исчезновение будет завершен, и событие перехода обязательно будет запущено.

E.g. http://jsfiddle.net/vw3t627g/1/

var button = document.querySelector('button'); 

button.addEventListener('mouseover', function() { 
    button.classList.add('bye-bye'); 
}); 

button.addEventListener('transitionend', function(e) { 
    console.log(e); 
    button.parentNode.removeChild(button); 
});