javascript - 使用 vanilla js 和 css 的动画移动动画

Question

我想像this webiste 那样制作动画显示和隐藏导航菜单

我试着用 JS 来做

const body = document.getElementsByTagName("body")[0];
let element = document.querySelector(".navigation");
let button = document.querySelector(".menu-button");

 button.addEventListener("click", function() {
  button.classList.toggle("menu-button--changed");
  element.classList.toggle("navigation--show");
});

和宽度scss

.navigation {
  background-color: rgb(14, 14, 23);
  width: 250px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3;
  padding: 6rem 0 2rem 0rem;
  transition: transform 0.3s ease-out;
  transform: translateX(30rem);
  &--show {
    transform: translateX(0rem);
  }

 &__item {
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.03);

    &:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
  }
  &__link {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 11px 5px 10px 20px;
    font-size: 1.4rem;

    &:hover {
      text-transform: uppercase;
    }
  }
}

HTML

<!-- Mobile menu button -->
  <div class="menu-button">
    <div class="menu-button--bar"></div>
  </div>

  <!-- Navigation -->
  <div class="navigation">
    <nav class="menu__nav">
      <ul class="navigation__list">
        <li class="navigation__item"><a class="navigation__link" href="#">Home</a></li>
        <li class="navigation__item"><a class="navigation__link" href="#">Contact</a></li>
        <li class="navigation__item"><a class="navigation__link" href="#">Group</a></li>
      </ul>
    </nav>
  </div>

  <div class="content-wrapper">
    <!-- Header -->
    <div class="main-header">
      <img src="img/logo-retina-1.png" class="main-header__logo">
      <div class="main-header__bg"></div>
      <div class="main-header__bg--decoder"></div>
    </div>

但它不能正常工作。当我显示菜单时，我不知道如何将 body 向左移动，并将其更改为更暗。 我尝试添加，但动画不起作用。

Answer 1

这是我前段时间为另一个问题做的一个非常基本的问题，它与您的要求相似。基本上，当用户到达某个滚动点时，导航栏会改变颜色。希望应该是一个起点，让您真正开始让它消失然后重新出现。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
    <div class="container">
        <div class="navbar-header">
            <!-- Mobile Hamburger -->
            <button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
        </div>
        <div class="navbar-collapse collapse">
            <!-- Navigation Links -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">HOME</a></li>
                <li><a href="">COURSES</a></li>
                <li><a href="">PRICING</a></li>
                <li><a href="">ACCOUNT</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

<div style="height:1000px"></div>

CSS

.navbar { 
  background-color:#101010; 
  border:none; 
  height: 200vh;
}
#logo { 
  width:45px; 
  height:auto; 
 }
.navbar-right li a { 
  color:#e5e5e5;  
  font-size:14px; 
}
ul.navbar-right li a:hover { 
  color:#e5e5e5; 
  text-decoration: none; 
  background-color:transparent; 
}
ul.navbar-right li a:visited { 
  color:#e5e5e5; 
  text-decoration:none; 
}
/* Transitions */
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }

JS

// Change nav on scroll
$(function() {
    var header = $(".navbar");

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 200) {
            header.addClass("nav-scrolled");
        } else {
            header.removeClass("nav-scrolled");
        }
    })
});

替代: https://jsfiddle.net/vtqeuzf5/