Question

我必须做菜单。我有问题，因为动画不流畅和流畅。它以漂亮，流畅的方式显示，但是当它隐藏时，它就会消失。我想以这种方式做，它也隐藏在流畅的方式，但我不知道这里有什么问题。如果您有任何疑问，请不要犹豫。我非常感谢你的帮助。

＆＃13;

$('.nav-toggle').click(function() {
  $(this).toggleClass('menu-opened');
  if ($('nav').hasClass('is-hidden')) {
    $('nav').removeClass('is-hidden');
    $('nav').animate({
      'right': '0%'
    }, 'fast', 'linear');
  } else {
    $('nav').animate({
      'right': '-100%'
    }, 'fast', 'linear');
    $('nav').addClass('is-hidden');
  }
});

＆＃13;

.is-hidden {
  display: none !important;
}

.professionals #main>header.mobile-menu .nav-toggle.menu-opened .icon-menu-toggle {
  background-position: -76px -387px;
  width: 12px;
  height: 12px;
  background-image: url("../images/velux-sprite.png?key=2017051911");
  background-repeat: no-repeat;
  display: inline-block;
}

nav {
  background-color: #333;
  position: relative;
  top: 45px;
  width: 80%;
  max-width: 400px;
  float: right;
  border-bottom: 50000px solid #333;
  margin-bottom: -50000px;
  right: -100%;
  overflow: hidden;
  min-height: 1000px;
  transition: 0.5s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-container">
  <div class="nav-toggle"><i class="velux-icon icon-menu-toggle"></i></div>
  <nav class="is-hidden">
    <!-- Server needs to fill in url's for full search (page redirect) -->
    <aside class="search show" data-full-search-url="/wyniki-wyszukiwania?search=">
      <div class="search-box">
        <div class="search-field">
          <input placeholder="Search" type="text"> <i class="velux-icon icon-cross"></i> </div>
        <div class="button right small"> <a href="../">Search<i class="velux-icon icon-search-white"></i></a></div>
      </div>
    </aside>
  </nav>
</div>

＆＃13;

Answer 1

一切都很好只做一件事评论 .is-hidden 类并在导航中进行一些更改下面你可以看到

/*    .is-hidden {

显示：无！重要; / 删除此部分 /

} * /

nav{   background-color: #333;
position: relative;
top: 45px;
width: 80%;
max-width: 400px;
float: right;
border-bottom: 50000px solid #333;
margin-bottom: -50000px;
right: -100%;
overflow: hidden;
min-height: 1000px;
transition:3s;

}

动画Sidenav无法正常工作

1 个答案: