0

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

1 回答 1

0

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

我删除了周围的超时

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

并补充说：

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

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

看看更新的JSFiddle

于 2013-08-19T07:36:49.480 回答