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

Question

在下面的示例中，我正在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>

transitionend即使在初始状态和最终状态相同的情况下，我如何实现处理？

Answer 1

当发生样式更改事件时，通常会发生转换。也就是说，当元素的样式（属性或更多的值）发生变化时，过渡就开始了。W3C 规范（如预期的那样）没有定义何时触发样式更改事件并将其留给实现。

以下是一个我能在找到W3C规范这个特定主题（2^次以下的锚段）：

当样式更改事件发生时，实现必须根据在该事件中更改的计算值开始转换。

实际上，以下似乎是关于何时开始过渡的更具决定性的定义。这是在此锚点指向的部分的末尾找到的：

如果以下所有情况都为真：

• 该元素没有该属性的运行过渡，
• 在变更前的风格不同，可与进行插值后，改文风该属性，
• 元素没有属性的完成转换或完成转换的结束值与属性的更改后样式不同，
• 有一个匹配的 transition-property 值，并且
• 合并的持续时间大于 0 秒，

那么实现必须从已完成的转换集中删除已完成的转换（如果存在）并开始一个转换，其：

• 开始时间是样式更改事件的时间加上匹配的转换延迟，
• 结束时间是开始时间加上匹配的过渡持续时间，
• 起始值是更改前样式中过渡属性的值，
• 结束值是更改后样式中过渡属性的值，
• 反向调整起始值与起始值相同，反向缩短系数为1。

现在，根据我对 UA 如何工作以及如何优化它们的理解，当元素上设置的任何属性都没有发生更改时，我看不出它们有任何理由触发转换开始事件。这对 UA 来说是一种矫枉过正和额外的负担，而这很容易避免。当没有过渡开始事件本身时，在这种情况下几乎不可能触发过渡结束事件。

因此，看起来您很可能必须使用一些虚拟属性更改（或）使用值等于transition-duration+的计时器transition-delay来模拟transitionend.