用 jQuery 显示的不是一个疯狂的快速子菜单

Question

我有一个垂直移动菜单，其中有一个子菜单。我正在使用 jQuery 来显示它，以及一个函数 .toggleClass。它立即发生的问题，而且非常快。有没有办法以更微妙的方式做到这一点（应用某种过渡）？

这里是 codepen 和现在正在发生的事情的代码本身。 （点击投资组合链接）http://codepen.io/anon/pen/yMrgoV

<ul class="burger__nav-wrap">
                <li class="burger__nav-wrap-item"><a href="<?php echo site_url(); ?>" class="burger__nav-link burger__nav-link_color">Home</a></li>
                <li class="burger__nav-wrap-item burger__nav-wrap-item_click"><a href="#" class="burger__nav-link burger__nav-link_click-item">Portfolio+</a>
                    <ul class="burger__nav-wrap_hidden-menu">
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_big-margin burger__nav-wrap-item_hidden"><a href="fashion" class="burger__nav-link">Fashion</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="beauty" class="burger__nav-link">Beauty</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="editorial" class="burger__nav-link">Editorial</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="tests" class="burger__nav-link">Tests</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="family" class="burger__nav-link">Family</a></li>
                    </ul>
                </li>
                <li class="burger__nav-wrap-item"><a href="blog" class="burger__nav-link burger__nav-link_color">Blog</a></li>
                <li class="burger__nav-wrap-item"><a href="about" class="burger__nav-link burger__nav-link_color">About</a></li>
                <li class="burger__nav-wrap-item"><a href="contact" class="burger__nav-link burger__nav-link_color">Contact</a></li>

.burger__nav-wrap_hidden-menu {
  display: none;
}

.open-menu {
  display: block;
}

$(function(){
  $(".burger__nav-link_click-item").on("click", function(){
    $(".burger__nav-wrap_hidden-menu").toggleClass("open-menu");
  });
});

Answer 1

用toggle()代替toggleClass("open-menu")

默认速度为 400 毫秒，您可以更改持续时间或缓动类型。在这里查看所有选项：http://api.jquery.com/toggle/

如果您需要添加.open-menu 类，那么您可以使用这样的函数回调：

$(function(){
 $(".burger__nav-link_click-item").on("click", function(){
  $(".burger__nav-wrap_hidden-menu").toggle(500,function(){
    $(this).toggleClass('open-menu');
  })
 })
});

Answer 2

您的子菜单的两个状态目前有display:none 和display:block。由于display 不是动画，您需要使用另一个属性来隐藏您的子菜单。一种可以转换的。

例如，您可以使用max-height:

.burger__nav-wrap_hidden-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}

.open-menu {
  max-height: 90px;
}

$(function(){
  $(".burger__nav-link_click-item").on("click", function(){
    $(".burger__nav-wrap_hidden-menu").toggleClass("open-menu");
  });
});

.burger__nav-wrap_hidden-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}

.open-menu {
  max-height: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="burger__nav-wrap">
                <li class="burger__nav-wrap-item"><a href="<?php echo site_url(); ?>" class="burger__nav-link burger__nav-link_color">Home</a></li>
                <li class="burger__nav-wrap-item burger__nav-wrap-item_click"><a href="#" class="burger__nav-link burger__nav-link_click-item">Portfolio+</a>
                    <ul class="burger__nav-wrap_hidden-menu">
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_big-margin burger__nav-wrap-item_hidden"><a href="fashion" class="burger__nav-link">Fashion</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="beauty" class="burger__nav-link">Beauty</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="editorial" class="burger__nav-link">Editorial</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="tests" class="burger__nav-link">Tests</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="family" class="burger__nav-link">Family</a></li>
                    </ul>
                </li>
                <li class="burger__nav-wrap-item"><a href="blog" class="burger__nav-link burger__nav-link_color">Blog</a></li>
                <li class="burger__nav-wrap-item"><a href="about" class="burger__nav-link burger__nav-link_color">About</a></li>
                <li class="burger__nav-wrap-item"><a href="contact" class="burger__nav-link burger__nav-link_color">Contact</a></li>

这是一个最小的示例，但它可以让您完全控制动画的持续时间 (.4s) 和计时功能 (cubic-bezier(.4,0,.2,1))，或者最终控制延迟（第 4 个参数，此处缺失）。你也可以组合多个属性，你可以在transition属性中为每个属性设置动画细节。

例如，我将为<li>s 添加一些过渡，并带有交错延迟：

$(function(){
  $(".burger__nav-link_click-item").on("click", function(){
    $(".burger__nav-wrap_hidden-menu").toggleClass("open-menu");
  });
});

.burger__nav-wrap_hidden-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
  transition-delay: .4s;
}

.open-menu {
  max-height: 90px;
  transition-delay: 0s;
}
.burger__nav-wrap_hidden-menu li {
  transition: transform .3s cubic-bezier(.4,0,.2,1) .4s, opacity .2s linear .4s;
  transform: translateX(100px);
  opacity: 0;
}

.burger__nav-wrap_hidden-menu li:nth-child(2) { transition-delay:.3s}
.burger__nav-wrap_hidden-menu li:nth-child(3) { transition-delay:.2s}
.burger__nav-wrap_hidden-menu li:nth-child(4) { transition-delay:.1s}
.burger__nav-wrap_hidden-menu li:nth-child(5) { transition-delay:.0s}

.open-menu li {
  transform: translateX(0);
  opacity: 1;
  transition-delay: .2s;
}

.open-menu li:nth-child(2) { transition-delay:.3s}
.open-menu li:nth-child(3) { transition-delay:.4s}
.open-menu li:nth-child(4) { transition-delay:.5s}
.open-menu li:nth-child(5) { transition-delay:.6s}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="burger__nav-wrap">
                <li class="burger__nav-wrap-item"><a href="<?php echo site_url(); ?>" class="burger__nav-link burger__nav-link_color">Home</a></li>
                <li class="burger__nav-wrap-item burger__nav-wrap-item_click"><a href="#" class="burger__nav-link burger__nav-link_click-item">Portfolio+</a>
                    <ul class="burger__nav-wrap_hidden-menu">
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_big-margin burger__nav-wrap-item_hidden"><a href="fashion" class="burger__nav-link">Fashion</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="beauty" class="burger__nav-link">Beauty</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="editorial" class="burger__nav-link">Editorial</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="tests" class="burger__nav-link">Tests</a></li>
                        <li class="burger__nav-wrap-item burger__nav-wrap-item_small-margin burger__nav-wrap-item_hidden"><a href="family" class="burger__nav-link">Family</a></li>
                    </ul>
                </li>
                <li class="burger__nav-wrap-item"><a href="blog" class="burger__nav-link burger__nav-link_color">Blog</a></li>
                <li class="burger__nav-wrap-item"><a href="about" class="burger__nav-link burger__nav-link_color">About</a></li>
                <li class="burger__nav-wrap-item"><a href="contact" class="burger__nav-link burger__nav-link_color">Contact</a></li>

虽然交错的CSS 动画适用于菜单和小型集合，但它们不应该用于更复杂的场景，因为它们往往存在一些问题：

• 它们在相当低的复杂度下变得乏味
• 许多人认为它们违反直觉
• 动画没有相互链接，例如，如果您想在一个集合上交错循环动画，在更改选项卡并返回后，您可能会发现它们不再同步。

另一个选项是使用JavasSript。我在another SO answer中详细介绍了一些方面，如果您有兴趣。