web-dev-qa-db-ja.com

ブートストラップ：デフォルトの「fade」、「hide」、「in」クラスを使用してフェードしてから何かを非表示にする方法は？

Bootstrapは、その遷移に「hide」、「fade」、「in」の各クラスを使用します。

私が抱えている問題は、「フェード」と「イン」を使用すると、不透明度が0から1に変わることです。トランジション効果は完璧ですが、コンテンツはページ上でスペースを占有します。それを参照してください。たとえば、コンテナに境界線がある場合、境界線の前に大きな空白があります。

「in」クラスを追加および削除することにより、既存のCSSトランジションを利用したいのですが、フェードアウトしている要素はすべて、トランジションが終了した後にのみ非表示にする必要があります。したがって、基本的に、モーダルで正確に何をするかですが、どのように行うのかわかりません。

以下の私の例では、非表示を追加または削除すると、フェードエフェクトが発生する前に、divが即座に表示または非表示になります。

ここでJSフィドル

HTMLの例：

<div class="control-group">
    <label class="control-label">Choose one:</label>
    <div class="controls">
        <label class="radio inline">
            <input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label>
        <label class="radio inline">
            <input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label>
    </div>
</div>
<div id="yellow-box" class="hide fade">
    <p>I'm yellow</p>
</div>
<div id="red-box" class="hide fade">
    <p>I'm red</p>
</div>

JSの例：

$(document).ready(function () {
    $('#yellow-trigger').click(function () {
        $('#yellow-box').addClass('in').removeClass('hide');
        $('#red-box').addClass('hide').removeClass('in');
    });

    $('#red-trigger').click(function () {
        $('#red-box').addClass('in').removeClass('hide');
        $('#yellow-box').addClass('hide').removeClass('in');
    });
});
jquerytwitter-bootstrapshow-hide
8
davidpauljunior

FadeInエフェクトにjQueryを使用しない理由は何ですか？以下は、jQueryでフェードインを有効にするためのコードです。

ここで中段

「フェード」クラスを削除

<div id="yellow-box" class="hide">
<p>I'm yellow</p> </div>

フェードイン用にjQueryを更新

$(document).ready(function () {

  $('#yellow-trigger').click(function () {
      $('#red-box').hide();
      $('#yellow-box').fadeIn('slow');
  });

  $('#red-trigger').click(function () {
      $('#yellow-box').hide();
      $('#red-box').fadeIn('slow');     
  });

});
15
Zane

これは非常に古いですが、他の誰かがここに来た場合の答えは、合成イベントbsTransitionEndにシングルショットハンドラを使用することです。

例：

$(".alert").one('bsTransitionEnd',function() {
    $(this).addClass('hide');
});
window.setTimeout(function(){
    $(".alert").removeClass('in');
},1000);
6
Seth Kingsley