FireFox 中的 CSS3 过渡失败答案

【问题标题】：CSS3 transition misfires in FireFoxFireFox 中的 CSS3 过渡失败
【发布时间】：2013-08-20 21:47:39
【问题描述】：

看下面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;
}

【问题讨论】：

标签： firefox css-transitions

【解决方案1】：

诀窍是强制浏览器应用元素当前同步工作的样式。

我删除了

周围的超时

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

并补充：

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

我从 TIM TAUBERT 写的 article 中得到这个想法

看看更新后的JSFiddle

【讨论】：