bootstrap模态动画用animate.css打开/关闭

任何人都可以帮助我，当引导模式打开和关闭时，如何使用动画CSS样式进行动画制作？由于Modal打开它应该打开与淡入效果，同时关闭它应该与淡出效果。bootstrap模态动画用animate.css打开/关闭

我想使用animate.css css样式表为动画模式poup打开和关闭。它应该添加类fadeIn而打开模型，同时关闭模式它应该添加类fadeOut。（类.fadeIn & .fadeOut从aniamte.css样式表）

2017-07-17 Vijay Patil

[CSS如何使一个元素淡入然后淡出？]的可能重复（https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-和 - 则 - 淡出） – Adonis

添加fade到您的情态标记的类属性：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal with animation</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     Close modal to see <i>fade-out</i> effect. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Open modal with <i>fade-in</i> effect 
 
</button>

从你的语气标记删除.fade类只是出现一个。详情请参阅Remove animation部分。

来源

2017-07-17 06:15:32 Alexander

$('.modal').on('show.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated'); 
    }) 
    $('.modal').on('hide.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated'); 
})

这是我想要的。

来源

2017-07-17 09:36:56

bootstrap模态动画用animate.css打开/关闭

回答

相关问题