Question

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

不幸的是，由于初始和最终背景颜色相同，transitionend不会被div2触发：

＆＃13;

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')
})

＆＃13;

div {
  width: 100px;
  height: 100px;
  transition: background-color .5s;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: green;
}

.toggled {
  background-color: green !important;
}

＆＃13;

<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>

＆＃13;

即使初始状态和最终状态相同，我怎样才能处理transitionend？

Answer 1

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

以下是我在W3C Specs中可以找到的关于这一特定主题的最多内容（2 ^nd para下面的锚点）：

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

实际上，下面似乎是关于何时应该开始转换的更具决定性的定义。这可以在this anchor所指示的部分的末尾找到：

如果满足以下所有条件：


该元素没有属性的运行转换，

更改前的风格与 不同，可以使用该属性的 更改后风格进行插补 ，

元素没有已完成的属性转换，或者已完成转换的结束值与属性的更改后样式不同，

存在匹配的transition-property值，

组合持续时间大于0，


然后实现必须从已完成的转换 中删除已完成的转换（如果存在）并启动 的转换：


开始时间是样式更改事件的时间加上匹配的转换延迟，

结束时间是开始时间加上匹配的转换持续时间，

起始值是变更前样式中的过渡属性的值，

结束值是更改后样式中转换属性的值，

反转调整的起始值与起始值相同，并且   逆转缩短因子为1。

现在基于我对UA如何工作以及如何优化它们的理解，我没有看到任何理由让它们在元素上设置的任何属性都没有进行更改时触发转换启动事件。这对UA来说是一种过度和额外的负担，很容易避免。当没有转换启动事件本身时，几乎没有办法在这种情况下触发转换结束事件。

所以，看起来你很可能不得不使用一些虚拟属性更改（或）使用一个值等于transition-duration + transition-delay的计时器来模仿{{ 1}}。

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

1 个答案: