Toggle 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动画一个起点，并确保尝试使用相同的'Unit'，例如％，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>

Answer 2

请从以下位置更改关键帧navEnd：

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

至：

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

请在此处检查解决方案：https://jsfiddle.net/pj28gu9q/希望对您有所帮助！ 😊