Question

我想在div之间切换并从每个内容中滑动一些内容，我尝试重新创建的外观是Helbak网站上的导航。

我能够在div之间进行切换，这是很好但是让div滑动，切换和淡入淡出是我需要帮助的地方。如果您在Helbak网站上看到示例，我希望我的动画以相同的方式工作。我试图让它工作，但我不能让它像helbak一样工作。

以下是我的HTML代码段：

  <div class="navbar__menu__item navbar__menu__item--products">
        <a class="navbar__menu__item--js" href="#" data-target=".navbar__menu__dropdown--products">products <span><i class="fa fa-angle-down"></i></span></a>
  </div>

 <div class="navbar__menu__dropdown navbar__menu__dropdown--js navbar__menu__dropdown--products">
   <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>        
   </ul>
 </div>

这是我的JS：

//Menu Dropdown
$(".navbar__menu__item--js").click(function () {
    var $target = $($(this).data('target'));
    $(".navbar__menu__dropdown--js").not($target).slideUp();
    $($target).fadeToggle();        
});

我添加了一个jsfiddle来展示它目前是如何运作的。

Answer 1

我设法更接近你想要的东西

https://jsfiddle.net/yc5bxu1f/1/

但是，您可能想退一步并废弃到目前为止所做的事情。正如Helback正在使用CSS转换。

https://css-tricks.com/almanac/properties/t/transition/

让你知道他们做了什么。他们把ul内容隐藏在画布上面：-20em;或类似的，并将不透明度设置为0.

然后单击实际菜单项.navbar__menu__item。它将ul的类切换为open-state。我建议积极使用这个词。

所以你的CSS看起来像。

.navbar__menu__item {
  /* Set up the style of the DIV and set it to transparent by default (depending on your Javascript support)*/
  opacity:0;
  background-color:#ddd;
  transition: opacity 0.5s ease-out;
}

.navbar__menu__item.active {
  /* When a user clicks it make the div fadein */
  opacity:1;
  transition: opacity 0.5s ease-in;
}

.navbar__menu__item > ul {
  /* hide the content of the ul menu off canvas */
  top:-20em;
  opacity:0;
  transition: all 0.5s ease-out;
}

.navbar__menu__item.active > ul {
  /* when the div is active this declaration should then have the effect of sliding down and fading in */
  top:0;
  opacity:1;
  transition: all 0.5s ease-in;
}

你还可以将它与延迟结合使用，以便在div淡入之后在菜单项中滑动之前暂停。

这里的核心思想是元素的状态在CSS中定义，所有Javascript都是用活动标志切换每个元素。对于记忆和你自己的理智来说，这是一个更好的方法。

js看起来像这样。

$(function(){
  var $menuItem = $('.navbar__menu__item');

  $menuItem.each(function(){
    var $this = $(this)
    $this.on('click', function(){
      $this.addClass('active')
    })
  })
})

在

1 个答案: