bootstrap modal animation open/close with animate.css

问题

Please anyone can help me, How can animate css styles can be use to animate while bootstrap modal opens and closes? As Modal Opens it should be open with fadeIn effect and while closing it should with fadeOut effect.

I wanted to use animate.css css stylesheet for animate modal poup open and close. It should add class fadeIn while opening Model and while closing the modal it should be adding class fadeOut. ( Class .fadeIn & .fadeOut are from aniamte.css stylesheet)

回答1:

  $('.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');
 })

This is I wanted.

回答2:

Add fade to class attribute of your modal markup:

<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>

Remove the .fade class from your modal markup to simply appear one. See Remove animation section for details.

回答3:

$('#modelDivId').on('show.bs.modal', function (e) {
      $('.modal .modal-dialog').attr('class', 'modal-dialog  flipInX  animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
      $('.modal .modal-dialog').attr('class', 'modal-dialog  flipOutX  animated');
 })

来源：https://stackoverflow.com/questions/45136969/bootstrap-modal-animation-open-close-with-animate-css

标签

bootstrap-modal

animate.css