如何使用纯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>