Question

请查看以下JSFiddle
我遇到的问题是NotificationText的顶部转换总是触发，但通知的高度转换不会。通知过渡似乎是随机发生的只需按下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编写的article中得到了这个想法

查看更新的JSFiddle

CSSF过渡在FireFox中失败

1 个答案: