0

次の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;
}
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 に答える