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过渡时没有发生.有人能告诉我这里的根本原因或问题是什么.

Answer 1

如果转换中断,则不会触发transitionend事件及其前缀变量.

从W3C规范:

transitionend事件发生在转换完成时.如果在完成之前删除了转换,例如,如果删除了transition-property,则不会触发该事件.

CSS转换如何在浏览器级别上工作(参见:http://www.w3.org/TR/css3-transitions/#reversing),如果动画被某些属性更改中断,则通过反向执行来"重置"或者在某些情况下完全被忽略.这可能有助于了解,因为它可以消除在大多数项目中使用transitionend的需要.