純粋なjavascriptでshow-hide divに円滑なトランジションを挿入するには

Question

「固定メニュー」が表示されたらスムーズなトランジションを挿入するにはどうすればよいですか？

私はプロパティーtransitionを使用していますが、機能しません。

私は間違っていますか？

window.addEventListener("scroll", function(event) { 
 

 
var scrollPos; \t 
 
var menu_mobile = document.getElementById("menu_mobile"); 
 
scrollPos = window.scrollY; 
 

 
    if(scrollPos > 108){ 
 
    menu_mobile.style.display = "initial"; 
 
    menu_mobile.style.transform = "translateY(0%)"; 
 
    menu_mobile.style.top = "0"; 
 
    menu_mobile.style.transition = "all 0.3s"; 
 
    } 
 
    if(scrollPos < 108){ 
 
    menu_mobile.style.display = "none"; 
 
    } 
 
}, false);

.menu-mobile{ 
 
\t display: none; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t background: #ff008a; 
 
\t z-index: 99; 
 
\t transform: translateY(-240%); 
 
\t transition: all 0.3s; 
 
\t -webkit-transition: all 0.3s; 
 
} 
 

 
.aux{ 
 
    height: 1500px; 
 
    background: gray; 
 
}

\t <section class="menu-mobile container no-margin" id="menu_mobile"> 
 
\t \t <div class="col-md-12 text-center no-margin"> 
 
\t \t \t <h2 class="titulo-menu-mobile">TEXT TEXT TEXT</h2> 
 
\t \t </div> 
 
\t </section> 
 
    
 
    <section class="aux"></section>

Answer 1

あなたはできませんtransitiondisplayプロパティ。代わりにopacityを使用しますが、opacity: 0;の要素はまだページ上の領域を占有するため、このはのレイアウトの問題を残りのページレイアウトに応じて作成します。

window.addEventListener("scroll", function(event) { 
 

 
var scrollPos; \t 
 
var menu_mobile = document.getElementById("menu_mobile"); 
 
scrollPos = window.scrollY; 
 

 
    if(scrollPos > 108){ 
 
    menu_mobile.style.opacity = "1"; 
 
    menu_mobile.style.transform = "translateY(0%)"; 
 
    menu_mobile.style.top = "0"; 
 
    menu_mobile.style.transition = "all 0.3s"; 
 
    } 
 
    if(scrollPos < 108){ 
 
    menu_mobile.style.opacity = "0"; 
 
    } 
 
}, false);

.menu-mobile{ 
 
\t opacity: 0; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t background: #ff008a; 
 
\t z-index: 99; 
 
\t transform: translateY(-240%); 
 
\t transition: all 0.3s; 
 
\t -webkit-transition: all 0.3s; 
 
} 
 

 
.aux{ 
 
    height: 1500px; 
 
    background: gray; 
 
}

\t <section class="menu-mobile container no-margin" id="menu_mobile"> 
 
\t \t <div class="col-md-12 text-center no-margin"> 
 
\t \t \t <h2 class="titulo-menu-mobile">TEXT TEXT TEXT</h2> 
 
\t \t </div> 
 
\t </section> 
 
    
 
    <section class="aux"></section>

そしてここで同じコードをクリーンアップし、メニューが表示される必要があるときに代わりに手動でJavaScriptの変更を適用するので、クラスをトグルです。ブラウザの目に見える違いは、メニューがすでに一度スライドして元のコードにスクロールした後、上/下にスクロールしたときにこの手法がメニューに表示されるということだけです。代わりに、 `display`の` opacity`を使用しての先端のための

window.addEventListener("scroll", function(event) { 
 

 
    var scrollPos = window.scrollY, 
 
     menu_mobile = document.getElementById("menu_mobile"), 
 
     threshold = 108; 
 

 
    if (scrollPos > threshold) { 
 
    menu_mobile.classList.add('open'); 
 
    } else { 
 
    menu_mobile.classList.remove('open'); 
 
    } 
 
}, false);

.menu-mobile { 
 
    opacity: 0; 
 
    width: 100%; 
 
    position: fixed; 
 
    background: #ff008a; 
 
    z-index: 99; 
 
    transform: translateY(-100%); 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
} 
 

 
.open { 
 
    opacity: 1; 
 
    transform: translateY(0); 
 
    top: 0; 
 
} 
 

 
.aux { 
 
    height: 1500px; 
 
    background: gray; 
 
}

<section class="menu-mobile container no-margin" id="menu_mobile"> 
 
    <div class="col-md-12 text-center no-margin"> 
 
    <h2 class="titulo-menu-mobile">TEXT TEXT TEXT</h2> 
 
    </div> 
 
</section> 
 

 
<section class="aux"></section>