Twitterの標準のナビゲーションバードロップダウンメニューを取得しようとしていますBootstrap表示されるだけでなく、フェードインします。クラスfade
とin
を追加しようとしましたが、色あせていないようです。これが私のフィドルです http://jsfiddle.net/byronyasgur/5zr4r/10/ 。
私は別の方法でそれを試みました-例えば この質問 の答えですが、何らかの理由でjqueryでドロップダウントリガーをターゲットにするのに問題があります。
これをいじってみると、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で遊んでいます。
最新のCSSのみのアプローチを提出したいと思います。
.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.open > .dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
これにより、.fade
トランジションアニメーションを処理しますが、.open
は、不透明度とポインタの状態を制御するものです。
Jason Featheringhamの answer の小さな調整Bootstrap 4で機能します。
.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.show > .dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
たぶんjQueryでこのようなことをしています:
$(function() {
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').fadeToggle(500);
});
});
ここでフィドルをチェックできます: http://jsfiddle.net/5zr4r/15/
UPDATE:fade
in
をul
から削除する必要があると言うのを忘れました。
私も素敵な解決策を見つけました:
// 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();
});
あなたはこれを試すことができます:
_// 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/