代码之家 › 专栏 › 技术社区 › Fred

如何为使用JavaScript出现和消失的导航栏添加平滑过渡效果?

css-animations css html javascript

Fred · 技术社区 · 3 年前

我试图在点击按钮元素时,用一些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);

3 回复 | 直到 3 年前

Unmitigated 3 年前

您可以使用转换并切换一个更改不透明度和变换的类。

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>

推荐文章

lineage · docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]

1 年前

mini1012 · 关键帧css中百分比之间的延迟

1 年前

Fernandossmm · element.animate()使用关键帧似乎忽略了放松功能

2 年前

goalTosin · 当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

2 年前

Dan · 如何设置重置变换的动画:使用CSS关键帧旋转?

3 年前

Dan · 如何使用Tailwind创建动画序列?

3 年前

Thomas Pötz · CSS伪元素的翻译速度快于主元素

3 年前

Morteza M · 在连续旋转中更改CSS动画持续时间

3 年前

Chris Dk · 为什么我的html元素在动画后会消失

3 年前

dododdo · 看到对象后在css中的动画

3 年前