javascript - 如何在点击时为 translateX() 设置动画

Question

我遇到了 translateX 属性的问题。

我希望导航菜单隐藏在右侧，当用户点击菜单图标时，导航 translateX 从右到左轻松过渡，当然导航菜单会在点击前隐藏。它以某种方式不起作用，这是代码:

CSS:

/**************************************
    Desktop menu + menu icon
**************************************/
    #menu .nav-item {
      transform: translateX(85vh);
      display: none;
    }

    .clicked {
      display: block;
      transform: translateX(-85vh);
    }

HTML:

<header class="header">
    <!-- Navigation and logo -->
    <nav class="navbar navbar-expand-lg">
        <!-- navbar brand -->
        <a class="navbar-brand" href="/">
            <img src="./imgs/rev_logo.png" />
        </a>
        <!-- toggle button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span>
            <svg class="polygon-icon" viewBox="0 0 29.76 25.77">
              <polygon id="polygon" points="21.74 1 8.02 1 1.16 12.88 8.02 24.77 21.74 24.77 28.6 12.88 21.74 1"/>
            </svg>
          </span>
        </button>
        <!-- Menu -->
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto" id="menu">
                <li class="nav-item">
                    <a class="nav-link" href="#">Explore</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Talks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="speaker.php">Become a Speaker</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="host.php">Become a Host</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">News</a>
                </li>
              <li>
                <img class="desktop-menu-icon" src="./imgs/menu.svg" width="50" />
              </li>
            </ul>
        </div>
    </nav>
</header>

JS:

$(document).ready(function() {
        $(".desktop-menu-icon").click(function(){
          $(".nav-item").addClass("clicked");
        });
      });

Answer 1

您需要向转换添加过渡。

 #menu .nav-item {
  transform: translateX(85vh);
  display: none;
  transition: all 1s;
}

参见 this有关转换和转换的更多详细信息的文章