如何使用純JavaScript在show-hide div中插入平滑過渡

Question

當“固定菜單”出現時，如何插入平滑過渡？

我正在使用屬性transition但無法正常工作。

我做錯了什么？

 window.addEventListener("scroll", function(event) { var scrollPos; 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{ display: none; width: 100%; position: fixed; background: #ff008a; z-index: 99; transform: translateY(-240%); transition: all 0.3s; -webkit-transition: all 0.3s; } .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> 

Answer 1

您無法transition display屬性。 您想改用opacity ，盡管這可能會導致布局問題，具體取決於頁面布局的其余部分，因為元素的opacity: 0; 仍會占據頁面上的空間。

 window.addEventListener("scroll", function(event) { var scrollPos; 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{ opacity: 0; width: 100%; position: fixed; background: #ff008a; z-index: 99; transform: translateY(-240%); transition: all 0.3s; -webkit-transition: all 0.3s; } .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> 

這是清理菜單時應清除並切換類的相同代碼，而不是手動應用javascript更改。 瀏覽器中唯一可見的區別是，此技術將在菜單已經滑下一次並且您的原始代碼沒有執行此操作時向上/向下滾動菜單時translateY()菜單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>