javascript - ブートストラップ ドロップダウンにスライド効果を追加する

Question

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

私が試したこと：

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

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

Answer 1

Also it's possible to avoid using JavaScript for drop-down effect, and use CSS3 transition, by adding this small piece of code to your style:

.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;
}

The only problem with this way is that you should manually specify max-height. If you set a very big value, your animation will be very quick.

It works like a charm if you know the approximate height of your dropdowns, otherwise you still can use javascript to set a precise max-height value.

Here is small example: DEMO

---

! There is small bug with padding in this solution, check Jacob Stamm's comment with solution.

Answer 2

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

$('.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 3

このスレッドを立ち上げることができるかどうかはわかりませんが、オープン クラスがあまりにも早く削除されたときに発生する視覚的なバグの簡単な修正方法を見つけました。基本的には、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 4

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

   // 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 5

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

拡張された回答は私の最初の回答だったので、以前に十分な詳細がなかった場合は言い訳をしてください。

Bootstrap 3.x では、私は個人的に CSS アニメーションを好み、animate.css と Bootstrap Dropdown Javascript Hooks を併用しています。それはかなり柔軟なアプローチです。

ステップ 1: head タグを使用してページに animate.css を追加します。

<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:次に、2 つのカスタム データ属性を dropdrop-menu 要素に追加します。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 を追加して data-dropdown-in/out データ属性を読み取り、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 番目の記事には、必要なレベルの詳細が記載されています。Tom

Answer 7

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 番目の引数 ( ) に のデフォルト値 ( ) を使用しています.stop()。falsejumpToEnd
• hidden.bs.dropdownイベント ハンドラーはクラスをドロップダウン トグルの親に復元します。.openこれは、クラスが最初に削除された直後に行われます。その間、アニメーションはまだ実行されており、上記の回答と同様に、その「アニメーションが完了しました」コールバックは、最終的に親からクラスをslideUp()削除する責任があります。.open
• 各イベント ハンドラーのセレクターが同じであるため、メソッドはチェーン化されます。