Ошибки перехода CSS3 в FireFox

Question

Посмотрите на следующие JSFiddle
Проблема, с которой я столкнулся, заключается в том, что верхний переход NotificationText всегда срабатывает, но переход по высоте в Notification не работает.
Переход Notification случайно срабатывает.
Просто нажмите кнопку в JSFiddle много раз, и вы поймете, что я имею в виду.

EDIT: Когда я устанавливаю тайм-аут от 1 до 100 мс, кажется, что он работает, не знаю почему. Может кто-нибудь объяснить? Верхний переход от текста всегда, кажется, работает

EDIT2: Найден ответ :-) Посмотрите на ответ ниже, если вы хотите знать, как я сделал это

У меня есть панель уведомлений с следующая структура HTML:

<div class="WebApp_NotificationContainer"> 
    <div class="WebApp_Notification" style="height: 30px;"> 
    <div class="WebApp_NotificationText " style="top: 0px;">TESTING</div> 
    </div> 
</div> 

Это все сгенерировано JavaScript (также новые уведомления добавляются в контейнер).

function addNotification(){ 
    var eViewPort = document.body; 
    var eNotificationContainer = $(".WebApp_NotificationContainer"); 
    var eNotification, eNotificationText, eNotificationDiv, eAllNotifications; 

    var sNotification = "TEST"; 

    //Create the container if it doesn't already exist 
    if(eNotificationContainer.length ==0){ 
     eNotificationContainer = document.createElement('div'); 
     eNotificationContainer.className = "WebApp_NotificationContainer"; 

     eViewPort.appendChild(eNotificationContainer); 
     eNotificationContainer = $(eNotificationContainer); 
    } 

    //Get a reference to the notifications 
    eAllNotifications = $(".WebApp_Notification"); 

    //Create the new notification div 
    eNotification = document.createElement('div'); 
    eNotification.className = "WebApp_Notification"; 

    //Create the textnode to be shown in the notification 
    eNotificationText = document.createTextNode(sNotification); 

    //Create the div to contain the text 
    eNotificationDiv = document.createElement('div'); 
    eNotificationDiv.className = "WebApp_NotificationText"; 

    eNotificationDiv.appendChild(eNotificationText); 
    eNotification.appendChild(eNotificationDiv); 

    //Add the notification at the top of the list 
    if(eAllNotifications.length > 0){ 
     $(eNotification).insertBefore(eAllNotifications[0]); 
    }else{ 
     eNotificationContainer.append(eNotification); 
    } 

    var y = eNotification.offsetHeight; 

    eNotification.style.height = "0px"; 

    //For some reason we want to wait a little bit after the notification is appended for the animation to work 
    setTimeout(function(){ 
     eNotification.style.height = "30px"; 
     eNotificationDiv.style.top = "0px"; 
    },1); 
} 

CSS-я должен управлять уведомлениями выскакивают в верхней части экрана и переход для них, кажется, падения вниз.

.WebApp_NotificationContainer{ 
    position: fixed; 
    top: 0px; 
    width: 500px; 
    margin-left: -250px; 
    left: 50%; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 

    background: #9EA85E; 
} 

.WebApp_Notification{ 
    position: relative; 
    border-top: 1px solid #BEBEBE; 
    overflow: hidden; 

    top: 0px; 
    transition: height, top; 
    -moz-transition: height, top; 
    -webkit-transition: height, top; 

    transition-duration: 1s; 
    transition-timing-function: linear; 

    -webkit-transition-duration: 1s; 
    -webkit-transition-timing-function:linear; 

    color: #FFF; 
    background: #9EA85E; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 

    z-index: 1; 

} 

.WebApp_NotificationText{ 
    transition: top linear 1s ; 
    -moz-transition: top linear 1s ; 
    -webkit-transition: top linear 1s ; 

    top:-30px; 

    float: left; 
    width: 450px; 
    margin: 10px 0px 10px 20px; 
    position: relative; 
} 

Answer 1

Хитрость заключалась в том, чтобы заставить браузер применить текущий стиль элемента, который работает синхронно.

Я удалил таймаут вокруг

eNotification.style.height = "30px"; 
eNotificationDiv.style.top = "0px"; 

И добавил:

window.getComputedStyle(eNotification).height; 
window.getComputedStyle(eNotificationDiv).top; 

Я получил идею от article Тима Тауберт

Посмотрите на обновленный JSFiddle