ページ上部の通知バーと共にテキストを移動

Question

ページの下部の通知バーから簡単なスライドを作成しました。すべてが意図どおり完璧に動作しますが、そのバーをページの上から下にスライドさせようとすると、テキストの動作が異なります。下から上にスライドさせると、divと一緒にテキストが移動します。上から下にスライドすると、divがテキストの上にくるとテキストがそのまま残ります。これを防ぐ方法を教えてください。

以下は、「bottom：0」の代わりに「top：0」に変更すると、下からポップアップするコードです（div内のテキストが移動します）。テキストは最初から固定された位置に表示されます。

$("p").click(function() { \t \t 
 
     $('#message-box').slideToggle('slow').delay(1500).slideToggle('slow'); 
 
    }); \t

#message-box { 
 
     display: none; 
 
     width: 100%; 
 
     background-color: #FFA339; 
 
     height: 50px; 
 
     line-height: 50px; 
 
     text-align: center; 
 
     font-size: 30px; 
 
     color: #35220C; 
 
     position: absolute; 
 
     bottom: 0; 
 
     z-index:50; 
 
     font-weight: bold; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 
    
 
    <div id='message-box'>notification</div> 
 
    <p>click here</p>

Answer 1

ので - バーが高くは50pxで、テキストはその行の高さにそれらは50pxのおかげで中央に配置されます。その計算は、コンテナの上部からテキストのスペースに基づいて行われます。

画面の下部からスライドすると、バーの高さが下から上に向かって増加しています。テキストの位置はコンテナの上端に基づいているため、コンテナの上端が上に移動すると、テキストの視覚効果が「上」になり、一緒にアニメーション化されているように見えます。

画面上部からスライドすると、バーの高さが上から下に向かって増加しています。テキストは、コンテナの上部から常に間隔を置いて表示され、画面の上部から同じ50ピクセルを占めているため、表示されません。

修正として、私はjQueryアニメーションを完全に削除し、より滑らかなCSSトランジションを使用してこのアニメーションを達成する方法を示しました。さて、jQueryでクラスを切り替えると、バー全体が高さが変わるのではなく、画面外から画面上に移動します。

理にかなって

$("p").click(function() { 
 
    $('#message-box').addClass('show').delay(1500).queue(function() { 
 
    $(this).removeClass('show').dequeue(); 
 
    }); 
 
});

#message-box { 
 
    width: 100%; 
 
    background-color: #FFA339; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: #35220C; 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: 50; 
 
    font-weight: bold; 
 
    transform: translateY(-100%); 
 
    transition: transform .6s; 
 
} 
 

 
#message-box.show { 
 
    transform: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 

 
<div id='message-box'>notification</div> 
 
<p>click here</p>