0

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)

Vijay Patil
  • 31
  • 1
  • 4
  • Possible duplicate of [CSS how to make an element fade in and then fade out?](https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-and-then-fade-out) – Adonis Jul 17 '17 at 07:33

3 Answers3

3
  $('.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.

Vijay Patil
  • 31
  • 1
  • 4
1

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.

Alexander
  • 3,922
  • 7
  • 24
  • 34
0
$('#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');
 })
design cetaceans
  • 1
  • 1