Question

我在css过渡时遇到滞后问题，点击fa-bars图标，侧边栏显示滞后。我想要轻松顺利，但现在当点击fa-bars图标我的侧边栏开始有点滞后我尝试使用css transition transition: all 0.2s ease;

来解决

HTML

<div class="mobile-navigation">

  <div class="header">
    <i class="fa fa-bars fa-2x"></i>
  </div>

  <div class="mobile-nav-body">

    <ul>
      <li class="li">
        <a href="/"></a>
      </li>
      <li class="open-submenu li">
        <a href="#"> <i class="fa fa-chevron-down"></i>
        </a>
        <ul class="submenu">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li class="open-submenu li">
        <a href="#"></a> <i class="fa fa-chevron-down"></i>
        </a>
        <ul class="submenu">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li class="open-submenu li">
        <a href="#"> <i class="fa fa-chevron-down"></i>
        </a>
        <ul class="submenu">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li class="open-submenu li">
        <a href="#"> <i class="fa fa-chevron-down"></i>
        </a>
        <ul class="submenu">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li class="li">
        <a href="/onlinetv"></a>
      </li>
    </ul>
  </div>

</div>

CSS

.mobile-navigation .mobile-nav-body {
    position: fixed;
    top: 0;
    left: -230px;
    width: 230px;
    height: 100%;
    padding: 5px 0;
    background-color: #231111 !important;
    overflow-y: auto;
    transition: all 0.2s ease;
    z-index: 999999999;

}
.mobile-menu-open .header{
    left:230px !important;
}

body {
    position: relative !important;
    overflow-x: hidden !important;
    left:0;
    transition: all 0.2s ease;
}    

body.mobile-menu-open {
    left: 230px;
}

body.mobile-menu-open .mobile-nav-body {
    left: 0;
}

的jQuery

$(".fa-bars").on('click', function() {
    $('body').toggleClass('mobile-menu-open');
});

为什么我不能设置简单的过渡，侧边栏滞后

0 个答案: