Firefox没有触发transitionend事件

Question

document.getElementById("mylogo").addEventListener( 'webkitTransitionEnd', function( event )
{
   document.getElementById("mylogotext").className = "mylogoText_visible_style";
});

 document.getElementById("mylogo").addEventListener( 'transitionend', function( event )
    {
       document.getElementById("mylogotext").className = "mylogoText_visible_style";
    });

---

.mylogoText_style
{
    position:absolute;
    left:-350px;
    top:105px;
    opacity:0;
    z-index:1;
}

.mylogoText_visible_style{

    position:absolute;
    left:59px;
    top:105px;
    opacity:1;
    z-index:1;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
}

这里的问题是当我尝试为Firefox添加过渡效果时，效果没有发生。 有人能告诉我这里的根本原因或问题吗。

- JMohasin

---

“transitionend”事件在Firefox中似乎运行良好...请参见http://jsfiddle.net/r2Wat/2/。您能否填写一个jsfiddle以重现此问题？ - Fabrizio Calderan

也许有点晚了，但我遇到了同样的问题。上面的解决方案是有效的。但是，你必须注意放置.addEventListener调用的位置；为了确保DOM已生成，我在$(document).ready(function() {});中使用它（因为我正在使用jQuery）。 - Michael A.

@FabrizioCalderan 我有同样的问题。对我来说不起作用。在这里看http://jsfiddle.net/rGECn/2/ 在FF15.0.1中。 - Behrang

我有类似的问题。但是我注意到@Behrang，你的jsfiddle在firefox转换中使用了错误的前缀。 - Joey Blake

你知道transitionend事件并不总是会触发吗？请参考：https://dev59.com/TGHVa4cB1Zd3GeqPmm2B#16324877 - Quickredfox

Answer 1

如果转换被中断，则transitionend事件及其前缀变体将不会触发。

根据W3C规范：

转换结束事件发生在转换完成时。在转换被移除之前，例如如果转换属性被移除，则该事件将不会触发。

CSS转换在浏览器级别上的工作原理（详见：http://www.w3.org/TR/css3-transitions/#reversing）是，如果某个属性更改导致动画中断，则通过反向执行或在某些情况下完全忽略来“重置”该动画。这可能对您有帮助，因为它可能消除了大多数项目中使用transitionend的必要性。

- Quickredfox

Answer 2

存在transitioncancel事件，因此您可以尝试添加以下代码片段：

document.getElementById("mylogo").addEventListener('transitioncancel', function(event) {
       document.getElementById("mylogotext").className = mylogoText_visible_style";
});

在其他得到赞同的答案中没有解释这个存在。

https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event

- EoghanM