Question

我正在使用AngularJS和Bootstrap 3.我的网络应用程序有一个“更新”按钮，用于保存用户所做的任何更改。当用户点击“更新”按钮时，我想激活并淡入引导程序的警告框，说“已保存信息”，然后在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秒后删除时淡出，但我不知道如何使用我的代码使其工作。

Answer 1

我使用这样的东西。（动画看起来很漂亮！）。只需添加此JS，并将类flash应用于您想要消失的每个项目。 请确保您还添加fade-in类一切！ fade-in类附带引导程序。它将在5秒后淡出。

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

Answer 2

尝试这样的事情

.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个不同值的原因是使它跨浏览器兼容。

Answer 3

我用这种方法实现了闪烁

在指令

中

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

并使用转换

定义闪烁

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

Answer 4

我决定使用这段代码作为替代更新指标

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);

}）;

Bootstrap 3 - 3秒后如何淡入警报框点击和淡出

4 个答案: