在下面的示例中，我使用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的处理？
当发生样式更改事件时，通常会发生转换。也就是说，当一个元素(一个属性或多个属性的值)的样式发生变化时，转换就开始了。W3C规范(正如预期的那样)没有定义何时触发样式更改事件，而是将其留给实现。
以下是我能在W3C规范中找到的关于这个特定主题的最多内容(锚点下方的2nd段落)：
当发生样式更改事件时，实现必须基于该事件中更改的计算值开始转换。
实际上，以下似乎是关于何时应该开始转换的更具决定性的定义。这是在这个锚指向的部分的末端发现的：
如果以下所有情况都为真：
- 元素没有属性的运行转换
- before-change样式不同于 ，并且可以使用该属性的after change样式进行插值
- 元素不具有该属性的已完成转换，或者已完成转换的结束值不同于该属性的更改后样式
- 存在匹配的转换属性值，并且
- 组合的持续时间大于0s
则实现必须从已完成转换集合中删除已完成转换(如果存在)并启动其:的转换
- 开始时间是样式改变事件的时间加上匹配转换延迟
- 结束时间是开始时间加上匹配的过渡持续时间
- 起始值是改变前样式中的转换属性的值
- end value是改变后样式中的转换属性的值
- 反转调整后的起始值与起始值相同，并且反向缩短因子为1
现在，根据我对UA如何工作以及如何优化它们的理解，当元素上设置的任何属性都没有发生更改时，我看不出它们有任何理由触发转换启动事件。这将是对UA的过度杀伤和额外负载，这是很容易避免的。当没有转换开始事件本身时，在这种情况下几乎不可能触发转换结束事件。
因此，看起来您很可能需要使用一些伪属性更改(或)使用值等于transition-duration+transition-delay的计时器来模拟transitionend。