3

在下面的示例中，我正在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即使在初始状态和最终状态相同的情况下，我如何才能实现处理？

4

1 回答 1

5

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

以下是我在W3C 规范中可以找到的关于这个特定主题的最多内容（锚点下方的第 2 段）：

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

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

如果以下所有条件都为真：

  • 元素没有属性的运行过渡，
  • 更改前的样式与该属性的更改后样式不同，并且可以插值，
  • 元素没有属性的完整过渡，或者已完成过渡的结束值与属性的更改后样式不同，
  • 有一个匹配的转换属性值，并且
  • 组合持续时间大于 0s，

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

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

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

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

于 2017-01-13T12:44:19.070 回答