FireFox中的CSS3過渡失火

看看下面的內容JSFiddle
我遇到的問題是，NotificationText的頂層轉換總是會觸發，但通知的高度轉換不會。
通知轉換似乎隨機觸發。
只需按下JSFiddle中的按鈕很多次，你就會明白我的意思。FireFox中的CSS3過渡失火

編輯：當我設置從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; 
}

來源

2013-08-19 Rick Hoving

訣竅是強制瀏覽器應用同步工作的元素的當前樣式。

我刪除了超時圍繞

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

並補充說：

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

我從article由TIM TAUBERT書面

看一看更新JSFiddle

的想法

來源

2013-08-19 07:36:49

FireFox中的CSS3過渡失火

回答

相關問題