javascript - 切换 CSS 动画

Question

我正在尝试创建一个动画，它在单击时从左侧的导航栏中滑动，然后在再次单击时反转动画。我遇到的唯一问题是反向部分，它跳过了整个动画但消失了。我不想使用 JQuery - 我正试图在这个元素中远离它。

let body = document.querySelector("body")
let navigation = document.getElementById("menu");
let mobileNav = document.getElementById("mobile-navigation-container");
let mobileClose = document.getElementById("mobile-close")

navigation.addEventListener("click", function(){
   mobileNav.classList.remove("animation-navEnd");
   mobileNav.className = "animation-navStart"
   body.className += "stop-scrolling"
})

mobileClose.addEventListener("click", function(){
   mobileNav.className = "animation-navEnd";
   mobileNav.classList.remove("animation-navStart");
   body.classList.remove("stop-scrolling");
})

#mobile-navigation-container {
    height: 100%;
    background-color: #687b7f;
    z-index: 100;
    position: absolute;
    width: 100%;
    left: -100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  
#mobile-close {
  display: flex;
  height: 10vh;
  width: 80%;
  justify-content: flex-end;
  align-items: center;
  font-size: 35px;
  color: #000000;
}

#mobile-navigation {
  display: flex;
  height: 90vh;
  width: 80%;
}

#mobile-navigation ul li {
  font-size: 28px;
  margin-top: 15px;
  font-family: "Roboto" !important;
}

#navbar-container {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #000000;
  z-index: 5;
}

#navigation {
  width: 350px;
  display: flex;
  justify-content: flex-end;
}


.animation-navStart{
  animation: navStart 0.5s forwards;
}

.animation-navEnd{
  animation: navEnd 0.5s forwards;
}

@keyframes navStart {
  100%{ left : 0;}
}

@keyframes navEnd {
  100%{ left : -100%;}
}

<div id="mobile-navigation-container">
    <div id="mobile-close">
        Close
    </div>
    <div id="mobile-navigation">
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/blog-posts">Blog</a></li>
        </ul>
    </div>
</div>

<div id="navbar-container">
    <div id="navigation">
       <div id="menu">Menu</div>
    </div>
</div>

Answer 1

尝试给你的 css 动画一个起点，并确保尝试使用相同的“单位”，例如 %、px 等

let body = document.querySelector("body")
let navigation = document.getElementById("menu");
let mobileNav = document.getElementById("mobile-navigation-container");
let mobileClose = document.getElementById("mobile-close")

navigation.addEventListener("click", function(){
  mobileNav.classList.remove("animation-navEnd");
  mobileNav.className = "animation-navStart"
  body.className += "stop-scrolling"
})

mobileClose.addEventListener("click", function(){
  mobileNav.className = "animation-navEnd";
  mobileNav.classList.remove("animation-navStart");
  body.classList.remove("stop-scrolling");
})

#mobile-navigation-container {
    height: 100%;
    background-color: #687b7f;
    z-index: 100;
    position: absolute;
    width: 100%;
    left: -100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  
#mobile-close {
  display: flex;
  height: 10vh;
  width: 80%;
  justify-content: flex-end;
  align-items: center;
  font-size: 35px;
  color: #000000;
}

#mobile-navigation {
  display: flex;
  height: 90vh;
  width: 80%;
}

#mobile-navigation ul li {
  font-size: 28px;
  margin-top: 15px;
  font-family: "Roboto" !important;
}

#navbar-container {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #000000;
  z-index: 5;
}

#navigation {
  width: 350px;
  display: flex;
  justify-content: flex-end;
}


.animation-navStart{
  animation: navStart 0.5s forwards;
}

.animation-navEnd{
  animation: navEnd 0.5s forwards;
}

@keyframes navStart {
  0% {
   left: -100%;
  }
  100%{ 
   left: 0%;
  }
}

@keyframes navEnd {
  0% {
   left: 0%;
  }
  100%{ 
   left: -100%;
  }
}

<div id="mobile-navigation-container">
  <div id="mobile-close">Close</div>
  <div id="mobile-navigation">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/blog-posts">Blog</a></li>
    </ul>
  </div>
</div>

<div id="navbar-container">
  <div id="navigation">
     <div id="menu">Menu</div>
  </div>
</div>