Firefox не вызывает событие для перехода

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 удалено, событие не будет запущено.

Как CSS-переходы работают на уровне браузера (см .: http://www.w3.org/TR/css3-transitions/#reversing), так это то, что если анимация прерывается каким-либо изменением свойства, она «сбрасывается» путем выполнения в обратном порядке или в некоторых случаях полностью игнорируется. Это может быть полезно знать, поскольку это может устранить необходимость использования transitionend в большинстве проектов.