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

huangapple
go评论118阅读模式
英文:

How can I add a smooth transition effect to a navbar that appears and disappears with JavaScript?

问题

我正在尝试通过单击按钮元素时使用一些JS使导航栏出现和消失。我成功做到了这一点，但我想添加一个过渡效果，使导航栏平滑地弹出。我有点困惑，不太知道从哪里开始。

抱歉，如果我的问题表达不清楚。

这是我的HTML部分：

  1. <section class="main-container">
  2.    <header class="main-header"></header>
  3.    <button class="displayer">Click Here</button>
  4. </section>

我的CSS：

  1. .main-container {
  2.   width: 100vw;
  3.   height: 100vh;
  4. }
  5. .main-header {
  6.   width: 100%;
  7.   height: 4em;
  8.   background-color: black;
  10.   position: absolute;
  11.   top: 0;
  12. }

我编写的JS部分：

  1. const remover = document.querySelector(".displayer");
  3. function vanish() {
  4.   const navBar = document.querySelector(".main-header");
  5.   const display = getComputedStyle(navBar).display;
  7.   if (display === "none") {
  8.     navBar.style.display = "block";
  9.   } else {
  10.     navBar.style.display = "none";
  11.   }
  12. }
  13. remover.addEventListener("click", vanish);

如果您需要任何进一步的帮助，请告诉我。

英文:

I am trying to make a navbar appear and disappear with some JS when clicking on a button element. I managed to do that bit, but I would like to add a transition so that the navbar pops up smoothly. I am a bit confused and don't quite know where to start.

Sorry if my question is not well formulated.

This is my html bit

&lt;section class=&quot;main-container&quot;&gt;
&lt;header class=&quot;main-header&quot;&gt;&lt;/header&gt;
&lt;button class=&quot;displayer&quot;&gt;Click Here&lt;/button&gt;
&lt;/section&gt;

My CSS

  1. .main-container {
  2.   width: 100vw;
  3.   height: 100vh;
  4. }
  5. .main-header {
  6.   width: 100%;
  7.   height: 4em;
  8.   background-color: black;
  10.   position: absolute;
  11.   top: 0;
  12. }

And the bit of JS I wrote

  1. const remover = document.querySelector(&quot;.displayer&quot;);
  3. function vanish() {
  4.   const navBar = document.querySelector(&quot;.main-header&quot;);
  5.   const display = getComputedStyle(navBar).display;
  7.   if (display === &quot;none&quot;) {
  8.     navBar.style.display = &quot;block&quot;;
  9.   } else {
  10.     navBar.style.display = &quot;none&quot;;
  11.   }
  12. }
  13. remover.addEventListener(&quot;click&quot;, vanish);

答案1

得分: 0

你可以使用过渡并切换一个类，该类更改不透明度和变换。

  1. const remover = document.querySelector(".displayer");
  2. function vanish() {
  3.   const navBar = document.querySelector(".main-header");
  4.   navBar.classList.toggle('show');
  5. }
  6. remover.addEventListener("click", vanish);
  1. .main-header {
  2.   width: 100%;
  3.   height: 4em;
  4.   background-color: black;
  5.   position: absolute;
  6.   top: 0;
  7.   transition: all .5s;
  8.   transform: translateY(-100px);
  9.   opacity: 0;
  10. }
  12. .main-header.show {
  13.   transform: none;
  14.   opacity: 1;
  15. }
  17. html,body{margin: 0}
  1. <header class="main-header show"></header>
  2. <button class="displayer" style="margin-top: 5em;">Click Here</button>
英文:

You could use a transition and toggle a class that changes opacity and transform.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const remover = document.querySelector(&quot;.displayer&quot;);
  2. function vanish() {
  3.   const navBar = document.querySelector(&quot;.main-header&quot;);
  4.   navBar.classList.toggle(&#39;show&#39;);
  5. }
  6. remover.addEventListener(&quot;click&quot;, vanish);

<!-- language: lang-css -->

  1. .main-header {
  2.   width: 100%;
  3.   height: 4em;
  4.   background-color: black;
  6.   position: absolute;
  7.   top: 0;
  8.   transition: all .5s;
  9.   transform: translateY(-100px);
  10.   opacity: 0;
  11. }
  13. .main-header.show {
  14.   transform: none;
  15.   opacity: 1;
  16. }
  18. html,body{margin: 0}

<!-- language: lang-html -->

  1. &lt;header class=&quot;main-header show&quot;&gt;&lt;/header&gt; 
  2. &lt;button class=&quot;displayer&quot; style=&quot;margin-top: 5em;&quot;&gt;Click Here&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 08:02:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76328090.html
  • css
  • css-animations
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定