在 IE 中未触发 transitionend 事件答案

【问题标题】：transistionend event not firing in IE在 IE 中未触发 transitionend 事件
【发布时间】：2015-10-12 16:55:01
【问题描述】：

我一直在努力让 css 转换与 IE 一起工作。由于某种原因，transitionend 事件会在除 IE 之外的所有浏览器中触发。我在这里创建了一个小例子来显示问题：

这是过渡结束时应该调用的代码：

$('.box-to-illuminate').mousedown(function () {         

        $(this).addClass('holding');                
        $(this).bind('transitionend', function () {
            $(this).off('transitionend');
            $(this).removeClass('holding');        
        }
    );        
});

在 Chrome 和 Firefox 中，该框在 transitionend 事件中变回黄色。这在 IE10+11 中从未调用过。

如果有人能解决这个难题，我将非常感激！

谢谢

【问题讨论】：

标签： javascript css internet-explorer

【解决方案1】：

3 年后...

我遇到了这个问题，似乎在 IE 10/11 中，如果转换发生在 'display:none' 元素或伪元素（例如 :before）上，transitionend 不会触发。

在您的 jsfiddle 中，过渡在 .box-to-illuminate.holding:before 中定义。您可以重组代码以在 .box-to-illuminate 上定义转换。我通常发现更容易定义

.box-to-illuminate {
    transition: transform 1.4s;
}

.box-to-illuminate.holding {
    transform: rotate(0);
}

这将在非伪元素上触发 transitionend 事件，而实际的转换“什么都不做”。

【讨论】：

【解决方案2】：

这是因为IE 9 and lower 不支持'transitionend'，但它支持'change'。虽然注意 IE 确实支持更改事件，但它是 incomplete in IE9 and buggy in previous version。请注意，因为 IE 9- 不支持 transitionend 在这种情况下功能将受到限制：

$(this).bind('change', function () {
    $(this).off('change');
    ...
});

【讨论】：

谢谢，但该示例也不适用于 IE 10 和 IE 11！
@HankRearden 我已经在 IE 10 和 Edge 上测试了 transitionend，它运行良好，你确定你没有在以前版本的 IE 上以兼容模式运行吗？
是的，我确定我正在运行 IE11。如果您在 Chrome 中运行该示例，您会看到转换后颜色变回黄色。这不是 IE 的情况。

【解决方案3】：

当我使用addEventListener("transitionend" 时，对我来说有效）。如果与框架绑定，则 "MSTransitionEnd" 和 "transitionEnd" 都不起作用，因此结果可能取决于特定的框架/版本

【讨论】：