在FireFox中CSS3过渡失败

Question

查看以下JSFiddle
我遇到的问题是NotificationText的顶部转换总是会触发，但Notification上的高度转换不会
通知转换似乎是随机启动的
只要多次按下JSFiddle中的按钮，你就会明白我的意思。

编辑：当我将超时时间从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;

我从TIM TAUBERT 写的文章中得到了这个想法

查看更新后的JSFiddle