添加滑动效果来引导下拉(Adding a slide effect to bootstrap dro

2019-06-17 21:37发布

站内文章 / 移动开发
13 0 0

我使用的引导 ，我想动画添加到一个下拉。 我想一个动画添加到它，滑下和离开时备份。 我怎么能这样做？

事情我想：

更改js文件下拉是这样的：

我怎样才能使引导的导航下拉滑盖顺畅上下？

Answer 1:

如果更新来引导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;
}

这种方式唯一的问题是，你应该手动指定最大高度。 如果设置了非常大的价值，你的动画会非常快。

它的工作原理就像一个魅力，如果你知道你的下拉列表中的大致高度，否则，你仍然可以使用JavaScript来精确设置最大高度值。

下面是小例子： DEMO

！ 有小bug，在这个解决方案填补，检查雅各斯塔姆与解决方案的评论。



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:

我不知道如果我能碰到这个线程，但我想出了一个快速修复视觉错误时的公开课被删除太快发生这种情况。 基本上，所有有给它是添加的onComplete功能的效果基本show事件内部和重置所有活性类和属性。 基本是这样的：

下面是结果： 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引导4

在自举4， .open类已被替换.show 。 我想实现这个只用CSS transistions，而不需要额外的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:

扩展的回答，是我的第一个答案，所以借口，如果之前没有足够的细节。

对于引导3.X我个人更喜欢CSS动画，我一直在使用animate.css和自举下拉的Javascript钩子一起。 虽然它可能不会有完全相同的效果你以后这是一个非常灵活的方法。

第1步：添加animate.css与头标记您的页面： 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

第2步：使用标准的HTML引导在扳机上： 

<div class="dropdown">
  <button type="button" data-toggle="dropdown">Dropdown trigger</button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

步骤3：然后加入2个自定义数据属性到dropdrop菜单元件; 数据下拉-在用于动画和数据下拉了适用于出动画。 这些可以是任何animate.css效果，如淡入淡出或 

<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>

步骤4：接着添加以下Javascript来读出的数据，下拉入/出的数据属性和反应，从而将引导的Javascript API钩子/事件（ http://getbootstrap.com/javascript/#dropdowns-events ）： 

var dropdownSelectors = $('.dropdown, .dropup');

// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
  // @todo - page level global?
  var effectInDefault = null,
      effectOutDefault = null;
  var dropdown = $(target),
      dropdownMenu = $('.dropdown-menu', target);
  var parentUl = dropdown.parents('ul.nav'); 

  // If parent is ul.nav allow global effect settings
  if (parentUl.size() > 0) {
    effectInDefault = parentUl.data('dropdown-in') || null;
    effectOutDefault = parentUl.data('dropdown-out') || null;
  }

  return {
    target:       target,
    dropdown:     dropdown,
    dropdownMenu: dropdownMenu,
    effectIn:     dropdownMenu.data('dropdown-in') || effectInDefault,
    effectOut:    dropdownMenu.data('dropdown-out') || effectOutDefault,  
  };
}

// Custom function to start effect (in or out)
// =========================
function dropdownEffectStart(data, effectToStart) {
  if (effectToStart) {
    data.dropdown.addClass('dropdown-animating');
    data.dropdownMenu.addClass('animated');
    data.dropdownMenu.addClass(effectToStart);    
  }
}

// Custom function to read when animation is over
// =========================
function dropdownEffectEnd(data, callbackFunc) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  data.dropdown.one(animationEnd, function() {
    data.dropdown.removeClass('dropdown-animating');
    data.dropdownMenu.removeClass('animated');
    data.dropdownMenu.removeClass(data.effectIn);
    data.dropdownMenu.removeClass(data.effectOut);

    // Custom callback option, used to remove open class in out effect
    if(typeof callbackFunc == 'function'){
      callbackFunc();
    }
  });
}

// Bootstrap API hooks
// =========================
dropdownSelectors.on({
  "show.bs.dropdown": function () {
    // On show, start in effect
    var dropdown = dropdownEffectData(this);
    dropdownEffectStart(dropdown, dropdown.effectIn);
  },
  "shown.bs.dropdown": function () {
    // On shown, remove in effect once complete
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectIn && dropdown.effectOut) {
      dropdownEffectEnd(dropdown, function() {}); 
    }
  },  
  "hide.bs.dropdown":  function(e) {
    // On hide, start out effect
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectOut) {
      e.preventDefault();   
      dropdownEffectStart(dropdown, dropdown.effectOut);   
      dropdownEffectEnd(dropdown, function() {
        dropdown.dropdown.removeClass('open');
      }); 
    }    
  }, 
});

第5步（可选）：如果你想加快或改变您就可以使用下面的CSS这样做动画： 

.dropdown-menu.animated {
  /* Speed up animations */
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

写了更详细的文章，如果任何人有兴趣下载：文章： http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

希望这是有益的和这第二个写起来了多数民众赞成需要汤姆详细程度



Answer 10:

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

如果你想显示悬停下拉菜单此代码的工作。

我只是改变了.slideToggle到.slideDown ＆ .slideUp ，并除去(400)的定时



Answer 11:

自举3参考

添加，因为我一直在这个线程解决方案事情败露，它的每一次充塞了我。

基本上，BS下拉立即删除.open父类，所以向上滑动不起作用。

使用相同的位作为了slideDown其他解决方案（）; 

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});


Answer 12:

下面是使用一个很好的简单解决方案jQuery是很好地工作： 

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

$('.dropdown-toggle').focusout(function () {
    $(this).next('.dropdown-menu').slideUp(300);
})

该幻灯片动画切换发生在点击，它总是滑回了上失去焦点。

改变300的价值任何你想要的，较低的更快动画的数量。

编辑：

该解决方案将仅适用于桌面视图的工作。 这将需要以移动很好显示一些进一步的修改。



Answer 13:

自举3，对回答这个变型以上使得移动slideUp()动画更加平滑; 以上问题的答案有波涛汹涌的动画，因为引导删除.open立即从切换的父类，所以这段代码恢复类，直到slideUp()的动画完成。 

// Add animations to topnav dropdowns
// based on https://stackoverflow.com/a/19339162
// and https://stackoverflow.com/a/52231970

$('.dropdown')
  .on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
  })
  .on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, false).slideUp(300, function() {
      $(this).parent().removeClass('open');
    });
  })
  .on('hidden.bs.dropdown', function() {
    $(this).addClass('open');
  });

主要差异：

  • 在hide.bs.dropdown事件处理程序我使用.stop()的默认值（ false ）的第二个参数（ jumpToEnd ）
  • 该hidden.bs.dropdown事件处理程序恢复.open类的下拉菜单切换的母公司，它几乎立即后级已经先取出做到这一点。 与此同时， slideUp()动画仍在运行，并且就像在上面的答案，它的“动画-是完成的”回调负责终于卸下.open从它的父类。
  • 方法链接在一起，因为每个事件处理程序的选择是一样的


文章来源: Adding a slide effect to bootstrap dropdown
标签： javascript drop-down-menu twitter-bootstrap
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~