[解決済み] 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>

どのように解決するのですか？

私は、先に述べたほとんどの答えに強く反対です。

短い回答です。

"in"クラスを省略し、jQueryを使ってフェードインするように追加してください。

3秒後にアラートをフェードインさせる例として、次のjsfiddleを参照してください。 http://jsfiddle.net/QAz2U/3/

長い回答です。

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

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

Bootstrapは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 のコードと CSS をいくつか調べてみたところ、答えは簡単でした。アラートに "in" クラスを追加しないでください。そして、アラートをフェードインさせたいときに、jQueryを使用してこれを追加します。

HTML (注意:ここに で クラスにはないことに注意してください!）

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

ジャバスクリプトです。

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

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

タイムアウトを使用した例として、このjsfiddleもご覧ください(John Lehmannに感謝!)。 http://jsfiddle.net/QAz2U/3/