web-dev-qa-db-ja.com

Twitter Bootstrapアラートはフェードインおよびフェードアウトできますか？

最初にBootstrapのアラートを見たとき、モーダルウィンドウのように動作し、ドロップダウンまたはフェードインし、閉じたときにフェードアウトすると考えました。しかし、それらは常に見えるようです。私はそれらをアプリの上のレイヤーに置いて表示を管理することができると思いますが、機能が組み込まれているかどうか疑問に思っていましたか？

ありがとう！

編集、私がこれまでに持っているもの：

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
jquerycssalertstwitter-bootstrap
75
kreek

前述のほとんどの回答には強く反対します。

短い答え：

「in」クラスを省略し、jQueryを使用して追加してフェードインします。

3秒後にアラートがフェードインする例については、このjsfiddleを参照してください http://jsfiddle.net/QAz2U/3/

長答：

bootstrapはネイティブでアラートのフェードをサポートしていませんが、ほとんどの回答ではjQueryフェード関数を使用します。jQueryフェード関数はJavaScriptを使用して要素をアニメーション（フェード）します。これの大きな利点は、ブラウザ間の互換性です。欠点はパフォーマンスです（参照： CSS3フェードアニメーションを呼び出すjQuery？ ）。

BootstrapはCSS3トランジションを使用しますが、これはパフォーマンスがはるかに優れています。これは、モバイルデバイスにとって重要です。

CSSをブートストラップしてアラートをフェードアウトします：

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

このパフォーマンスがとても重要だと思うのはなぜですか？古いブラウザとハードウェアを使用している人は、jQuery.fade（）で途切れ途切れの遷移を取得する可能性があります。同じことは、最新のブラウザを備えた古いハードウェアにも当てはまります。 CSS3トランジションを使用すると、最新のブラウザーを使用しているユーザーは古いハードウェアでもスムーズなアニメーションを取得でき、CSSトランジションをサポートしていない古いブラウザーを使用しているユーザーはすぐに要素がポップインするのを見ることができます。

上記と同じ答えを探してここに来ました：bootstrapアラートをフェードインします。 BootstrapのコードとCSSを掘り下げた後、答えはかなり簡単です。 「in」クラスをアラートに追加しないでください。また、アラートをフェードインする場合は、jQueryを使用してこれを追加します。

HTML（NOinクラスに注意！）

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript：

function showAlert(){
  $("#myAlert").addClass("in")
}

上記の関数を呼び出すと、「in」クラスが追加され、CSS3トランジションを使用してアラートがフェードインします:-)

タイムアウトを使用した例については、このjsfiddleも参照してください（John Lehmannに感謝！）： http://jsfiddle.net/QAz2U/3/

139
DivZero

私が使用するものはこれです：

テンプレートのアラートエリア

<div id="alert-area"></div>

次に、アラートを表示するjQuery関数

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');
28
Rob Vermeer

Jqueryを使用してボックスをフェードインできます。 'hide'クラスに組み込まれたブートストラップを使用して、div要素にdisplay：noneを効果的に設定します。

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

そして、次のようにjqueryでfadeIn関数を使用します。

$("#saveAlert").fadeIn();

FadeIn関数の継続時間も指定されます。例：$（ "＃saveAlert"）。fadeIn（400）;

FadeIn関数の使用に関する詳細は、jQueryの公式ドキュメントサイトで見つけることができます： http://api.jquery.com/fadeIn/

ちょっとした補足として、jqueryを使用しない場合は、 'hide'クラスを独自のCSSファイルに追加するか、これをdivに追加することができます。

 <div style="display:none;" id="saveAlert">

基本的にdivはデフォルトで非表示に設定され、jQueryはfadeInアクションを実行して、divを強制的に表示します。

17
kreek

2.3以降の場合、追加するだけです：

$(".alert").fadeOut(3000 );

ブートストラップ：

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

すべてのブラウザで動作します。

8
pri

hideクラスをalert-messageに追加します。次に、jQueryスクリプトのインポート後に次のコードを追加します。

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

複数のメッセージを処理する場合、このコードはそれらを昇順で非表示にします。

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});
6
cmcginty

現在の答えはどれも役に立たなかった。 Bootstrapを使用しています3。

ロブ・フェルメールがやっていることが好きで、彼の反応から始めました。

フェードインとフェードアウトの効果については、次の関数を記述してjQueryを使用しました。

アラートを追加する私のページのHtml：

        <div class="alert-messages text-center">
        </div>

アラートを表示および非表示にするJavaScript関数。

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

次に、アラートを表示および非表示にするには、次のような関数を呼び出します。

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

サイドノートとして、私はdiv.alert-messagesのスタイルを上部に固定しました：

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>
4
Chris

Bootstrapがfade inを使用する方法に同意しません（ドキュメントに記載されているように- http://v4-alpha.getbootstrap.com/components/alerts/ ）、および私の提案は、クラス名fadeおよびinを回避し、一般的にそのパターンを回避することです（現在、この質問に対する一流の回答で見られます）。

（1）セマンティクスが間違っています-遷移は一時的ですが、クラス名はそのままです。では、なぜクラスにfadeおよびfade inという名前を付ける必要があるのでしょうか。開発者がマークアップを読んだときに、それらの要素がfadedまたはfaded-inであることが明確になるように、fadedおよびfaded-inにする必要があります。 Bootstrapチームは既にhideのhiddenを廃止しました。なぜfadeは違うのですか？

（2）1つの遷移に2つのクラスfadeおよびinを使用すると、クラススペースが汚染されます。また、fadeとinが互いに関連付けられているかどうかは明らかではありません。 inクラスは、alertやalert-successのような完全に独立したクラスのように見えます。

最善の解決策は、要素がフェードアウトされたときにfadedを使用し、要素がフェードインされたときにそのクラスをfaded-inに置き換えることです。

アラートフェード

質問に答えるために。アラートのマークアップ、スタイル、およびロジックは、次の方法で記述する必要があると思います。 注：Vanilla javascriptを使用している場合は、jQueryロジックを自由に置き換えてください。

HTML

<div id="saveAlert" class="alert alert-success">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

JQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});
2
tfmontague

3秒後にこの方法でアラートをフェードクローズしました。それが役に立つことを願っています。

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)
1
wicardoso

もちろんはい。プロジェクトで次の単純なファイルを使用します。 https://Gist.github.com/3851727

まず、次のようなHTMLを追加します。

<div id="messagebox" class="alert hide"></div>

次に使用します：

$("#messagebox").message({text: "Hello world!", type: "error"});

error、success、warningなどのすべてのbootstrapアラートタイプをオプションとしてtypeプロパティに渡すことができます。

1
Afshin Mehrabani

これは非常に重要な質問であり、現在のメッセージを置き換えて新しいメッセージを追加することでメッセージを表示（表示/非表示）するのに苦労しました。

以下は実際の例です。

function showAndDismissAlert(type, message) {

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
    $(this).remove();
  });

}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

それが他の人を助けることを願っています！

0
VicJordan