10

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');
    });
});
4

2 に答える 2

13

フェードイン効果に 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');     
  });

});
于 2013-05-30T08:15:40.090 に答える
7

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

例：

$(".alert").one('bsTransitionEnd',function() {
    $(this).addClass('hide');
});
window.setTimeout(function(){
    $(".alert").removeClass('in');
},1000);
于 2015-10-06T11:28:48.233 に答える