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

Question

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

Answer 1

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

以下是我在W3C Specs 中找到的关于这个特定主题的最多信息（锚点下方的第 2^nd 段）：

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

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

如果满足以下所有条件：

• 元素没有属性的运行过渡，
• before-change 样式不同于，并且可以使用 该属性的after-change 样式进行插值强>,
• 元素没有属性的完整过渡，或者已完成过渡的结束值与属性的更改后样式不同，
• 有一个匹配的转换属性值，并且
• 组合时长大于0s，

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

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

---

现在，根据我对 UA 的工作原理以及如何优化它们的理解，我认为没有任何理由让它们在元素上设置的任何属性都没有发生变化时触发转换开始事件。这将是 UA 的过度杀伤和额外负载，可以很容易地避免。当没有过渡开始事件本身时，在这种情况下几乎不可能触发过渡结束事件。

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