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

我正在使用AngularJS和Bootstrap 3.我的Web应用程序有一个“更新”按钮，用于保存用户所做的任何更改。 当用户点击“更新”按钮时，我想激活并淡入自举的警报框，说“信息已保存”，然后在3秒后淡出。 我不知道如何创建这个function，可能需要一些帮助..

更新：

我决定使用这种方法：

HTML

Update 
 

JavaScript的

 $scope.save = function() { $('#alert_placeholder').html('
×Your information has been updated.
') 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; } 

您需要将淡入淡出和淡入淡出属性放在警报框中，然后隐藏警告框。 – 但只需设置两者的转换时间即可满足您的需求。 基本上你在这里做的是设置不透明度，然后设置执行此操作所需的时间长度。 我们有不同时间的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/

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

}）;