web-dev-qa-db-ja.com

bootstrapドロップダウンへのスライド効果の追加

bootstrap を使用しています。ドロップダウンにアニメーションを追加したいと思います。私はそれにアニメーションを追加し、それを離れるときにスライドダウンして元に戻したいです。どうすればこれができますか？

私が試したもの：

Jsドロップダウンファイルを次のように変更します。

ブートストラップのナビゲーションドロップダウンスライドを上下にスムーズにするにはどうすればよいですか？

javascriptdrop-down-menutwitter-bootstrap
77
Ben Beri

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イベント here について、特にドロップダウンイベント here について読むことができます。

140
cogell

また、この小さなコードをスタイルに追加することにより、ドロップダウン効果に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

！このソリューションにはパディングに小さなバグがあります。ソリューションでジェイコブ・スタムのコメントを確認してください。

62
MadisonTrash

私はそのようなことをしていますが、クリックではなくホバーで..これは私が使用しているコードです。クリックで動作するように少し調整することができるかもしれません

$('.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()
});
23
Yohn

このスレッドをバンプできるかどうかはわかりませんが、開いているクラスがあまりにも速く削除された場合に発生する視覚的なバグの簡単な修正方法を見つけました。基本的に、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');
        });
    });
});
15
IndieRok

スライドとフェード効果のための私のソリューションは次のとおりです。

   // 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:''});
      });
   });
10
Vedmant

クリックすると、以下のコードを使用して実行できます

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

上記のコードを使用していますが、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)
    });
7
Augusto Triste

2018 Bootstrap 4を更新

Boostrap 4では、.openクラスが.showに置き換えられました。私は、追加のJSやjQueryを必要とせずに、CSSトランジションのみを使用してこれを実装したいと思いました...

.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は、ドロップダウンコンテンツを収容するのに十分な任意の大きな値に設定できます。

6
Zim

拡張された答えは、私の最初の答えだったので、以前に十分な詳細がなかったのであれば言い訳です。

Bootstrap 3.xについては、私は個人的にCSSアニメーションを好み、animate.cssおよびBootstrap Dropdown Javascript Hooksを使用しています。正確な効果は得られないかもしれませんが、かなり柔軟なアプローチです。

ステップ1：ページにanimate.cssをheadタグで追加します：

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

ステップ2：トリガーで標準のBootstrap HTMLを使用します。

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

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

ステップ3：次に、dropdrop-menu要素に2つのカスタムデータ属性を追加します。 inアニメーションの場合はdata-dropdown-in、outアニメーションの場合はdata-dropdown-out。これらには、fadeInやfadeOutなどのanimate.cssエフェクトを使用できます

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

ステップ4：次に、次のJavascriptを追加して、データドロップイン/アウトデータ属性を読み取り、Bootstrap 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

これがお役に立てば幸いです。この2回目の記事には、必要な詳細レベルが含まれています。

3
Tom James
$('.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)タイミングを削除しました

2
ChapDaddy65

ブートストラップ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');
  });
});
1
Slipoch

jQueryを使用した、うまく機能する素敵なシンプルなソリューションを次に示します。

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

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

クリックするとスライドアニメーションの切り替えが発生し、フォーカスを失うと常にスライドが戻ります。

300値を任意の値に変更し、数値が小さいほどアニメーションが速くなります。

編集：

このソリューションは、デスクトップビューでのみ機能します。モバイル向けにうまく表示するには、さらに変更が必要です。

0
Barry Michael Doyle

Bootstrap 3の場合、上記の回答のこのバリエーションにより、モバイルslideUp()アニメーションがよりスムーズになります。 Bootstrapはトグルの親から.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イベントハンドラーでは、2番目の引数（false）に.stop()のデフォルト値（jumpToEnd）を使用しています
  • hidden.bs.dropdownイベントハンドラーは.openクラスをドロップダウントグルの親に復元し、クラスが最初に削除された直後にこれを行います。一方、slideUp()アニメーションはまだ実行中です。上記の回答と同様に、その「アニメーションが完了しました」コールバックは、最終的に親から.openクラスを削除します。
  • 各イベントハンドラーのセレクターは同じであるため、メソッドはチェーン化されています
0
Jordan Bradford