it-swarm.com.ru

Bootstrap 3 предупреждения отклонены с анимацией

Есть ли способ сделать так, чтобы оповещение о прекращении оповещения в начальной загрузке имело анимацию типа затухания?

Я добавил класс .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>

Но это не работает. Любая помощь будет оценена!

13
codeninja

вы можете опустить атрибут 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');
});
9
Ahm3d Said

вы можете добавить класс .in, предупреждение исчезнет.

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

$('.alert-dismissable').fadeOut(); или назначьте анимацию затухания css3 вашему классу затухания и примените ее к <div>, когда вы хотите, чтобы она исчезла.

3
zgood

Вы можете прослушать событие close.bs.alert для использования пользовательских эффектов:

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

Смотрите в действии на https://jsfiddle.net/6s8dgh72/8/

2
Pavel Dubinin