web-dev-qa-db-ja.com

Twitter Bootstrapドロップダウンメニューをフェードインさせることは可能ですか？

Twitterの標準のナビゲーションバードロップダウンメニューを取得しようとしていますBootstrap表示されるだけでなく、フェードインします。クラスfadeとinを追加しようとしましたが、色あせていないようです。これが私のフィドルです http://jsfiddle.net/byronyasgur/5zr4r/10/ 。

私は別の方法でそれを試みました-例えば この質問 の答えですが、何らかの理由でjqueryでドロップダウントリガーをターゲットにするのに問題があります。

jquerydrop-down-menutwitter-bootstrapfadein
14
byronyasgur

これをいじってみると、CSSアニメーションが最も効果的であるように見えます。

.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.2s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

より複雑なアニメーションを作成するために、他のCSSプロパティを追加できます。たとえば、私は左：-30->左：0で遊んでいます。

28
Benjamin Kahn

最新のCSSのみのアプローチを提出したいと思います。

.dropdown-menu.fade {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.open > .dropdown-menu.fade {
  pointer-events: auto;
  opacity: 1;
}

これにより、.fadeトランジションアニメーションを処理しますが、.openは、不透明度とポインタの状態を制御するものです。

15
Jason T Featheringham

Jason Featheringhamの answer の小さな調整Bootstrap 4で機能します。

.dropdown-menu.fade {
   display: block;
   opacity: 0;
   pointer-events: none;
}

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}
7
Stu

たぶんjQueryでこのようなことをしています：

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

ここでフィドルをチェックできます： http://jsfiddle.net/5zr4r/15/

UPDATE：fadeinをulから削除する必要があると言うのを忘れました。

6
Dim13i

私も素敵な解決策を見つけました：

// 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){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

例： http://codepen.io/danielyewright/pen/EvckL

5
Nerjuz

あなたはこれを試すことができます：

_// Add fadeToggle animation to dropdown       
$('.dropdown').on('show.bs.dropdown', function(e) {   
  $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

// Add fadeToggle animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e) { 
  $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
});
_

Bootstrapの既存の_show.bs.dropdown_および_hide.bs.dropdown_関数を利用し、ドロップダウン効果を「表示」ではなく「フェードイン」に変更します。 「スライド」を有効にする場合は、fadeToggle()をslideDown()に変更することもできます。お役に立てれば。

これがフィドルです： http://jsfiddle.net/ck5c8/

0
Daniely Wright