Bootstrap 3 警报被动画解除答案

【问题标题】：Bootstrap 3 alerts dismissed with animationBootstrap 3 警报被动画解除
【发布时间】：2013-12-31 20:48:57
【问题描述】：

有没有办法让 bootstrap 中的已关闭警报具有类似淡出的动画？

我在代码中添加了 .fade 类：

 <div class="alert alert-info fade alert-dismissable">
      <p><b>Gracias</b> por ponerte en contacto! Responderé a tu correo lo más pronto posible.</p>
 </div>

但它不起作用。任何帮助将不胜感激！

【问题讨论】：

对于以下任何答案（@guest 除外），如果您想从 DOM 中删除 .alert，则必须调用 $('.alert').alert('close')

标签： jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以添加'.in'类，警报淡出。

<div class="alert alert-info fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<p>message</p>
</div>

【讨论】：

添加in 类使其在关闭时淡出 out 有点令人困惑，但很好的答案。 +1 用于使用内置的 Bootstrap 功能。

【解决方案2】：

你可以省略 data-dismiss 属性

<div class="alert alert-warning alert-dismissable">
      <button type="button" class="close" aria-hidden="true">&times;</button>
      <p>animated dismissable</p>
</div>

并使用下面的 jQuery

$(".alert button.close").click(function (e) {
    $(this).parent().fadeOut('slow');
});

或者，如果您想单击任意位置以关闭警报，请使用

$(".alert-dismissable").click(function (e) {
    $(this).fadeOut('slow');
});

【讨论】：

其实，如果你想让这个工作，你应该省略 data-dismiss 属性（你别无选择）

【解决方案3】：

$('.alert-dismissable').fadeOut(); 或为您的淡出类分配一个 css3 淡出动画，并在您希望它淡出时将其应用于<div>。

【讨论】：

【解决方案4】：

你可以收听close.bs.alert事件来使用自定义效果：

$(function(){
    $('body').on('close.bs.alert', function(e){
        e.preventDefault();
        e.stopPropagation();
        $(e.target).slideUp();
    });
});

在https://jsfiddle.net/6s8dgh72/8/查看实际操作

【讨论】：

【解决方案5】：

你必须使用类“淡入淡出”它会工作！

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。