如何为使用JavaScript显示和消失的导航栏添加平滑过渡效果？

fivyi3re 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(115)

我试图使一个导航栏出现和消失的一些JS时，点击一个按钮元素。我设法做到了这一点，但我想添加一个过渡，使导航栏弹出顺利。我有点困惑，不知道从哪里开始。
对不起，我的问题没有很好地表达出来。
这是我的html位
<section class="main-container"> <header class="main-header"></header> <button class="displayer">Click Here</button> </section>
我的CSS

.main-container {
  width: 100vw;
  height: 100vh;
}
.main-header {
  width: 100%;
  height: 4em;
  background-color: black;

  position: absolute;
  top: 0;
}

我写的JS

const remover = document.querySelector(".displayer");

function vanish() {
  const navBar = document.querySelector(".main-header");
  const display = getComputedStyle(navBar).display;

  if (display === "none") {
    navBar.style.display = "block";
  } else {
    navBar.style.display = "none";
  }
}
remover.addEventListener("click", vanish);

JavaScript

来源：https://stackoverflow.com/questions/76328090/how-can-i-add-a-smooth-transition-effect-to-a-navbar-that-appears-and-disappears

1条答案

按热度按时间

tf7tbtn21#

您可以使用过渡并切换更改不透明度和变换的类。

const remover = document.querySelector(".displayer");
function vanish() {
  const navBar = document.querySelector(".main-header");
  navBar.classList.toggle('show');
}
remover.addEventListener("click", vanish);

.main-header {
  width: 100%;
  height: 4em;
  background-color: black;

  position: absolute;
  top: 0;
  transition: all .5s;
  transform: translateY(-100px);
  opacity: 0;
}

.main-header.show {
  transform: none;
  opacity: 1;
}

html,body{margin: 0}

<header class="main-header show"></header> 
<button class="displayer" style="margin-top: 5em;">Click Here</button>

赞(0）回复(0）举报 2023-05-27

我来回答

如何为使用JavaScript显示和消失的导航栏添加平滑过渡效果？

1条答案

相关问题

热门标签

最新问答