如何在click上为translateX（）设置动画

Posted 2021-03-27

我在使用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");
        });
      });

答案

您需要向转换添加转换。

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

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