web-dev-qa-db-ja.com

Bootstrap 3-クリック時にアラートボックスをフェードインし、3秒後にフェードアウトする方法

AngularJSとBootstrap 3.を使用しています。私のWebアプリには、ユーザーが行った変更を保存する[更新]ボタンがあります。ユーザーが[更新]ボタンをクリックすると、アクティブ化したいと思います。 「情報が保存されました」というフェードインブートストラップのアラートボックスが表示され、3秒後にフェードアウトします。この関数の作成方法がわからないため、サポートが必要な場合があります。

更新：

私はこのアプローチを使用することにしました：

HTML

<button type="button" class="btn btn-info" ng-click="save()">Update</button>

<div id = "alert_placeholder"></div>

JavaScript

$scope.save = function() {
    $('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>Your information has been updated.</span></div>')
    setTimeout(function() {
        $("div.alert").remove();
    }, 3000);
}

アラートボックスが最初に表示されたときにフェードインし、3秒後に削除されるとフェードアウトしたいのですが、使用しているコードでアラートボックスを機能させる方法がわかりません。

javascriptjquerycssangularjstwitter-bootstrap
7
user3314402

私はこのようなものを使用します。 （アニメーションはとてもきれいに見えます！）。このJSを追加し、非表示にするすべてのアイテムにクラスflashを適用するだけです。 fade-inクラスもすべてに追加するようにしてください！fade-inクラスにはブートストラップが付属しています。 5秒でフェードアウトします。

window.setTimeout(function() {
  $(".flash").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
  });
}, 5000);
15
nahtnam

このようなものを試してください

.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;
  -webkit-transition: opacity 3.0s linear;
  -moz-transition: opacity 3.0s linear;
  -o-transition: opacity 3.0s linear;
  transition: opacity 3.0s linear;
}

ただし、fadeとfade.inプロパティをアラートボックスに配置し、アラートボックスを非表示にする必要があります。 -ただし、必要なものに一致するように両方の遷移時間を設定するだけです。基本的に、ここで行っているのは不透明度を設定することであり、次にこれを行うのにかかる時間の長さです。 4つの異なる値がすべて異なる時間である理由は、クロスブラウザー互換にするためです。

3
stktrc

このコードを代替の更新インジケーターとして使用することにしました

http://jsfiddle.net/deC37/

<button type="button" data-loading-text="Saving..." class="btn btn-primary">Update</button>

$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
    $btn.button('reset');
}, 1000);

}）;

0
user3314402

私はこのアプローチを使用してまばたきを実装しました

指令で

..
element.addClass("blink");
$timeout(function () { element.removeClass("blink");} , 600 , false);
..

まばたきはトランジションで定義されます

.blink { background-color : orange; transition : all linear 600ms; }
0
haki