javascript - 当初始状态和最终状态相同时，不会触发transitionend

在下面的示例中，我正在使用CSS进行background-color转换，并尝试处理两个div的transitionend事件。

不幸的是，由于初始和最终背景颜色相同，因此未针对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>

即使初始状态和最终状态相同，如何处理transitionend？

最佳答案

过渡通常在style-change-event发生时发生。也就是说，当元素的样式(一个属性或更多值)改变时，过渡就开始了。 W3C规范(按预期)未定义何时触发样式更改事件并将其留给实现。

以下是我在W3C Specs中可以找到的有关该特定主题的最多内容( anchor 下方的第二段):



实际上，以下似乎是过渡何时开始的更明确的定义。这可以在this anchor指向的部分结尾处找到:



现在，基于对UA如何工作以及如何进行优化的了解，当元素上设置的任何属性均未发生更改时，我看不出有任何原因触发UA启动过渡事件。这将是一个过大的杀伤力，并且UA上的额外负担很容易避免。当没有过渡开始事件本身时，在这种情况下几乎不会触发过渡结束事件。

因此，您似乎很可能不得不使用一些虚拟属性更改(或)使用值等于transition-duration + transition-delay的计时器来模仿transitionend。