添加幻灯片效果以引导下拉列表

Question

我正在使用bootstrap,我想在下拉菜单中添加动画.我想为它添加动画,向下滑动并在离开时备份.我怎么能这样做？

我试过的事情:

像这样更改Js下拉文件:

如何使Bootstrap的导航下拉滑动顺畅上下？

Answer 1

如果你更新到Bootstrap 3(BS3),他们已经暴露了许多很好的Javascript事件,可以将你想要的功能绑定到.在BS3中,此代码将为您的所有下拉菜单提供您正在寻找的动画效果:

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

您可以在此处阅读有关BS3事件的信息,特别是有关下拉事件的信息.

Answer 2

此外,可以避免使用JavaScript进行下拉效果,并使用CSS3过渡,将这一小段代码添加到您的样式中:

.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
    max-height: 300px;
    opacity: 1;
}

这种方式唯一的问题是你应该手动指定max-height.如果设置一个非常大的值,您的动画将非常快.

如果您知道下拉列表的大致高度,它就像一个魅力,否则您仍然可以使用javascript设置精确的最大高度值.

这是一个小例子:DEMO

!在此解决方案中存在填充的小错误,请查看Jacob Stamm对解决方案的评论.

Answer 3

我正在做类似的事情但是在悬停而不是点击..这是我正在使用的代码,你可能能够稍微调整它以使其在点击上工作

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

Answer 4

我不知道我是否可以碰到这个帖子,但我想出了一个快速解决当开放类被删除太快时发生的视觉错误.基本上,它只是在slideUp事件中添加一个OnComplete函数并重置所有活动的类和属性.是这样的:

结果如下:Bootply示例

使用Javascript/jQuery的:

$(function(){
    // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

Answer 5

这是我的幻灯片和淡入淡出效果的解决方案:

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });

Answer 6

点击它可以使用下面的代码完成

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle(500);
});

Answer 7

我正在使用上面的代码,但我已经通过slideToggle更改了延迟效果.

它会在悬停时通过动画滑动下拉列表.

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400);
    }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400)
    });

Answer 8

更新2018年Bootstrap 4

在Boostrap 4中，.open该类已替换为.show。我想仅使用CSS过渡来实现此功能，而无需额外的JS或jQuery ...

.show > .dropdown-menu {
  max-height: 900px;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

演示：https：//www.codeply.com/go/3i8LzYVfMF

注意：max-height可以将其设置为足以容纳下拉菜单内容的任何大值。

Answer 9

对于Bootstrap 5，可以使用简单的 keframe 动画来完成简单而美观的动画幻灯片。

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle m-2" href="/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu slideIn rounded-2 p-3" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="/">Action</a></li>
            <li><a class="dropdown-item" href="/">Another action</a></li>
            <li><hr class="dropdown-divider"/></li>
            <li><a class="dropdown-item" href="/">Something else here</a></li>
          </ul>
        </li>