Question

我正在尝试在单击菜单图标时转换移动菜单的margin-left属性，但是它不起作用。菜单显示正常，唯一的问题是过渡不起作用。我已经读过其他人对此主题的疑问，但我仍然不知道自己在做什么错。如果有人可以帮助我了解问题所在，我将不胜感激。

HTML

httpdocs

CSS

<div class="nav-container">
<nav class="main-nav">
    <div class="main-nav__logo"><a href="#">Dógui</a></div>
    <div class="main-nav__navbar">
        <i class="fas fa-bars"></i>
        <div class="navbar__mobile__bg">
            <ul class="navbar__mobile">
                <div class="navbar__mobile__logo">Dógui</div>
                <li class="close-button">&times;</li>
                <li class="navbar__mobile__item"><a href="#">About Us</a></li>
                <li class="navbar__mobile__item"><a href="#">Services</a></li>
                <li class="navbar__mobile__item"><a href="#">Team</a></li>
                <li class="navbar__mobile__item"><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
</div>

JavaScript

.navbar__mobile__logo {
  font-family: 'Aladin';
  font-size: 2.5rem;
  color: #edb306;
  position: absolute;
  top: 10px;
  left: 32px;
}

.navbar__mobile__bg {
  background-color: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}

.navbar__mobile {
  display: none;
  color: #444;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 100%;
  width: 300px;
  opacity: .95;
  padding-top: 5rem;
  font-size: 1.2rem;
  padding-left: 2rem;
  margin-left: -300px;
  transition: margin-left 1s;
}

.navbar__mobile__item {
  padding: 1.2rem 0 1.2rem 0;
}

.close-button {
  cursor: pointer;
  position: absolute;
  font-size: 2.5rem;
  padding-right: 1rem;
  color: #edb306;
  top: 10px;
  right: 0;
}

我希望转换从左侧滑动。我为此使用了margin-left，但是它不起作用。我已经尝试过使用translateX，但也无法正常工作。

谢谢。

CSS过渡不适用于移动菜单

0 个答案: