Question

有没有办法让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>

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

Answer 1

你可以添加＆＃39; .in＆＃39;上课，警惕淡出。

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

Answer 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');
});

Answer 3

$('.alert-dismissable').fadeOut();或将fss3淡出动画分配给淡入淡出类，并在需要淡出时将其应用到<div>。

Answer 4

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

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

见https://jsfiddle.net/6s8dgh72/8/

的行动

Bootstrap 3警报被动画解雇

4 个答案: