如何在純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

你不能transition的display財產。你想用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修改清理和切換時的菜單應該會出現一個類相同的代碼。瀏覽器唯一可見的區別在於，在菜單已經滑下一次之後向上/向下滾動時，此技巧將會是菜單translateY()，而您的原始代碼沒有這樣做。

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>