24

Twitterブートストラップを使用していますが、アラートボックスのクローズのフェードが思ったより速く発生します。フェードの持続時間を変更したり、アラートごとに設定したりできる場所はありますか？

ありがとう

4

3 に答える 3

34

ダン・ハーマン

less を使用しておらず、bootstrap.css を編集したい場合は、.js ファイルをいじらないように、これを編集してみてください。

編集

 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.25s linear;
      -moz-transition: opacity 0.25s linear;
       -ms-transition: opacity 0.25s linear;
        -o-transition: opacity 0.25s linear;
           transition: opacity 0.25s linear;
 }

そしてそれを...にします

 .fade {
   opacity: 0;
   -webkit-transition: opacity 1.25s linear;
      -moz-transition: opacity 1.25s linear;
       -ms-transition: opacity 1.25s linear;
        -o-transition: opacity 1.25s linear;
           transition: opacity 1.25s linear;
 }

1.25 秒はデフォルト値ではありません。これは単なる例です。これを適用すると、その効果と違いに気付くでしょう。

ここで、フェード セレクターの別のバリアント、たとえば「myFade」を作成する場合は、bootstrap-alert.js を変更して、新しいクラス セレクターまたは「myFade」クラス セレクターを追加する必要があると思います。

JavaScriptについてはまだわかりません。bootstrap-alert.js を変更して新しいクラスを挿入する必要があると思いました。

于 2012-08-07T13:45:23.963 に答える
5

.transition(opacity .15s linear);component-animations.less で実際に使用します (5 行目)。

bootstrap-alert.js の 64 行目を見ると、クラスを参照している場所がわかります。.15 を希望する値に変更すると、準備完了です。

于 2012-05-04T01:20:42.877 に答える
0

ブートストラップ 4 の私にとっては、カスタム style.css にこれらの行を追加するだけで十分でした。

.show {
    transition: opacity 100ms; // You can play with the 1
}
于 2020-05-21T17:41:12.063 に答える