transtionend事件在IE中没有触发

transistionend event not firing in IE

本文关键字：事件 IE transtionend      更新时间：2023-09-26

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

http://jsfiddle.net/c55f60as/

下面是转换结束时应该调用的代码:

$('.box-to-illuminate').mousedown(function () {         
        $(this).addClass('holding');                
        $(this).bind('transitionend', function () {
            $(this).off('transitionend');
            $(this).removeClass('holding');        
        }
    );        
});

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

如果有人能解开这个谜题，我将非常感激!

谢谢

3年后…

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

在你的代码中，转换在.box-to-illuminate.holding:before中定义。您可以重构代码，将转换定义在.box-to-illuminate上。我通常发现定义

更容易
.box-to-illuminate {
    transition: transform 1.4s;
}
.box-to-illuminate.holding {
    transform: rotate(0);
}

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

这是因为ie9及以下版本不支持'transitionend'，但它支持'change'。虽然IE确实支持更改事件，但它在IE9中是不完整的，并且在以前的版本中有bug。请注意，由于ie9不支持transitionend，在这种情况下，功能将受到限制:

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

当我使用addEventListener("transitionend"时，我的作品。如果与框架绑定，"MSTransitionEnd"和"transitionEnd"都不能工作，因此结果可能取决于特定的框架/版本

相关文章：