15

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

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

4

6 に答える 6

30

これをいじってみると、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で遊んでいます。

于 2013-03-19T20:10:46.800 に答える
16

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

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

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

于 2015-10-12T21:20:44.483 に答える
9

Bootstrap 4 で機能する Jason Featheringham の回答を微調整します。

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

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}
于 2017-12-27T05:18:11.300 に答える
6

jQueryで次のようなことをするかもしれません：

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

ここでフィドルを確認できます：http://jsfiddle.net/5zr4r/15/

更新:からを削除する必要があると言うのを忘れていましfade inたul。

于 2012-12-11T23:08:45.190 に答える