Question

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

这里是转换结束时应该调用的代码：

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

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

在Chrome和Firefox中，此框在transitionend事件中变回黄色。在IE10 + 11中永远不会调用它。

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

由于

Answer 1

那是因为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');
    ...
});

Answer 2

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

Answer 3

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事件，而实际的转换不会执行任何操作。

transistionend事件未在IE

3 个答案: