轉換：使用Java進行TranslateY

Question

所以我知道這對這里的大多數人來說是如此簡單，但我正在學習，我真的希望有人能幫助我；

我正在為我的網站進行響應式導航，因此我想單擊菜單按鈕，以便菜單從屏幕頂部放下。 因此，我進行了轉換：translateY（-100％），但是我有一個功能可以使菜單（經典的3行）變成“ X”，因此我可以在此函數中添加些什么來同時制作菜單出現？ 而且我不知道為什么，但是從3條水平線到X的過渡效果很好，但是從X到3條線的過渡卻不一樣。

DOM

<div id="mobile_menu">
    <div class="mobile_menu_lines1"></div>
    <div class="mobile_menu_lines2"></div>
    <div class="mobile_menu_lines3"></div>
  </div>
  <nav id="mobile_nav">
      <ul id="mobile_links">
        <li><a href="">INICIO</a></li>
        <li><a href="">PORTAFOLIO</a></li>
        <li><a href="">NOSOTROS</a></li>
        <li><a href="">CONTACTO</a></li>
      </ul>
      <ul id="mobile_links_social">
          <li><a href=""><img src="assets/img/svgs/facebook_icon.svg" alt="Facebook logo"/></a></li>
          <li><a href=""><img src="assets/img/svgs/twitter_icon.svg" alt="Twitter Logo"/></a></li>
          <li><a href=""><img src="assets/img/svgs/instagram_icon.svg" alt="Instagram logo"/></a></li>
      </ul>
  </nav>

的CSS

#mobile_menu{
    position: absolute;
    display: block;
    width: 50px;
    height: 60px;
    float: right;
    right: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  .mobile_menu_lines1{
    max-width: 70%;
    align-items: center;
    height: 2px;
    background-color: white;
    margin-top: 18px;
    border-radius: 2px;
  }

  .mobile_menu_lines2, .mobile_menu_lines3{
    max-width: 70%;
    align-items: center;
    height: 2px;
    background-color: white;
    margin-top: 9px;
    border-radius: 2px;
  }

  .show .mobile_menu_lines1 {
    transform: rotate(45deg) translate(11px, 5px);
    transition: all 0.3s ease-in-out;
  }

  .show .mobile_menu_lines2 {
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  .show .mobile_menu_lines3 {
    transform: rotate(-45deg) translate(10px, -5px);
    transition: all 0.3s ease-in-out;
  }

  #mobile_nav{
    display: block;
    text-align: center;
    padding-top:60px;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    transform: translateY(-100%);
    transition: all 0.3s ease-in-out;
  }

  #mobile_nav #mobile_links li{
    padding: 15px 0;
  }

  #mobile_nav #mobile_links li a{
    list-style: none;
    text-decoration: none;
    color: white;
    font-family: "josefin sans";
    font-size: 12px;
    letter-spacing: 7px;
    align-items: center;
    text-align: center;
    padding: 15px 0;
    width:600px;
    max-width: 100%
  }

  #mobile_nav #mobile_links_social li{
    padding: 10px 20px;
  }

JS

var mobileNavMostrar = document.getElementById('mobile_menu');
mobileNavMostrar.addEventListener('click',function(){
  mobileNavMostrar.classList.toggle('show');
})

提前致謝。

Answer 1

我嘗試了您的代碼，但我認為您缺少兩件事-用於定義mobile_nav在顯示時應如何更改的CSS，以及用於在單擊時應用該CSS的JavaScript。