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的需要。

Firefox没有为transitionend提升事件

1 个答案: