1

В приведенном ниже примере я делаю переход background-color с использованием CSS и пытаюсь обрабатывать событие transitionend для обоих div.переход не запускается, когда начальное состояние и конечное состояние одинаковы

К сожалению, transitionend не уволили за div2 как начальные и конечные цвета фона одинаковы:

var div1 = $('#div1'); 
 
var div2 = $('#div2'); 
 

 
$('#toggle').on('click', function() { 
 
    div1.toggleClass('toggled'); 
 
    div2.toggleClass('toggled'); 
 
}) 
 

 
div1.on('transitionend', function() { 
 
    console.log('div1 transitionend') 
 
}) 
 

 
div2.on('transitionend', function() { 
 
    console.log('div2 transitionend') 
 
})
div { 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: background-color .5s; 
 
} 
 

 
#div1 { 
 
    background-color: red; 
 
} 
 

 
#div2 { 
 
    background-color: green; 
 
} 
 

 
.toggled { 
 
    background-color: green !important; 
 
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
<div id="div1"></div> 
 

 
<div id="div2"></div> 
 

 
<button id="toggle">Toggle animation</button>

Как я могу achive обработки transitionend даже в тех случаях, когда начальное состояние и конечное состояние одинаковы?

+0

Если я не ошибаюсь, переход запускается только тогда, когда значения разные. Итак, если переход сам по себе не происходит, я не думаю, что есть вероятность, что это событие начнется. – Harry

+0

Любые ссылки на спецификации? Я не могу найти что-либо, связанное с моим вопросом. –

+0

Нет, тем больше я ожидаю, что браузеры будут работать. Начало переходного события, когда переход к переходу не является переполнением. Я не думаю, что спецификации определяли бы что-либо для *, когда начинать переход *, они бы оставили его для реализации, но я проверю его для вас :) – Harry

ответ

2

Переход обычно происходит, когда происходит style-change-event. То есть, когда изменяется стиль элемента (значение свойства или больше), начинается переход. Спецификации W3C (как и ожидалось) не определяют, когда событие изменения стиля запускается и переходит к реализации.

Ниже самый больший, что я мог бы найти в W3C Specs об этой конкретной теме (2 я пунктом ниже якорей):

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

На самом деле нижеследующее представляется еще более убедительным определением того, когда должен начаться переход.Это находится в конце раздела, на который указывает this anchor:

Если все следующие условия:

  • элемент не имеет бегущую переход на имущество,
  • в перед тем, изменением стиль отличается от и может интерполировать со стилем после-изменений этого свойства,
  • элемент не имеет завершенный переход для свойства или конечного значения завершенного перехода отличается от стиля после-изменений для свойства,
  • есть соответствие значение переходного свойства и
  • комбинированная длительность больше, чем 0s,

затем реализации должны удалить завершенный переход (если он присутствует) из множества завершенных переходов и начать переход которого:

  • время начала это время события изменения стиля плюс задержка согласования перехода,
  • время окончания время начала плюс длительность согласования перехода,
  • начального значения является значением свойства перехода в перед тем, изменения стиля,
  • конечное значение является значением свойства перехода в стиле после-изменения,
  • задним ходом с поправкой на начальное значение такое же, как начальное значение и задним ходом укорочения коэффициент равен 1.

Теперь основано на моем понимании того, как UAs работа и как бы они были оптимизированы, я не вижу никаких оснований для их уволить начала переход событие, когда ни одно из свойств, установленных на элементе не проходит изменение. Это было бы излишеством и дополнительной нагрузкой на UA, чего можно было бы легко избежать. Когда не происходит самого события начала перехода, почти нет способа, чтобы в таких случаях было запущено событие конца перехода.

Таким образом, это выглядит, как вы бы, скорее всего, придется использовать несколько фиктивных изменений свойств (или) использовать таймер, значение которого равно transition-duration + transition-delay, чтобы имитировать transitionend.

+1

Большое спасибо, @Harry, очень приятно и точный ответ! –

+0

Добро пожаловать @limonte. Рад был помочь :) – Harry

Смежные вопросы