Question

我的translateX属性有问题。

我希望将导航菜单隐藏在右侧，并且当用户单击菜单图标时，导航转换X从右向左轻松过渡，当然，导航菜单将在单击之前隐藏。它以某种方式不起作用，下面是代码：

CSS：

00100110101011001011001

HTML：

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

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

JS：

<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>

Answer 1

您需要向转换添加过渡。

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

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

如何在单击时为translateX（）设置动画

1 个答案: