Блог

У меня возникла проблема со свойством 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;
}
  

Смотрите эту статью для получения более подробной информации о переходах и преобразованиях