Firefox不会引发transitionend事件 [英] Firefox not raising event for transitionend

问题描述

（$code $> document.getElementById（mylogo）。 =mylogoText_visible_style;
}）;
$ b $ document.getElementById（mylogo）。addEventListener（'transitionend'，function（event）
{
document.getElementById（mylogotext）。className =mylogoText_visible_style ;
}）;

---

  mylogoText_style 
 {
 position：absolute;剩余
：-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：所有的1s缓进0; 
 -moz-transition：全1s缓出0s; 
 
 
 
 
 
 $ b 
这里的问题是当我尝试为Firefox转换没有发生。 
有人可以告诉我什么是根本原因或问题在这里。
解决方案

transitionend事件和它的前缀变体做如果转换中断，则不触发。

来自W3C规范：

转换结束事件发生在转换完成时。如果转换属性被移除，那么事件将不会被触发。

CSS转换如何在浏览器级别上工作（请参阅： http://www.w3.org/TR/css3如果一个动画被一些属性改变所中断，那么通过反向执行或者在某些情况下被完全忽略而被重置。这可能有助于了解，因为这可能会消除在大多数项目中使用转换终端的需要。

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;
}

Here the problem is when i try to for firefox transition is not happening. Can someone tell me what is the root cause or problem here.

解决方案

The transitionend event and it's prefixed variants do NOT trigger if the transition is interrupted.

From the W3C spec:

The transitionend event occurs at the completion of the transition. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

How CSS transitions work on a browser level (see: http://www.w3.org/TR/css3-transitions/#reversing ) is that if an animation is interrupted by some property change it is "reset" by executing in reverse or in some cases completely ignored. This may be helpful to know as it may eliminate the need for using transitionend in most projects.

这篇关于Firefox不会引发transitionend事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！