bootstrap modal animation open/close with animate.css - bootstrap-modal

Question

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)

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

Answer 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">×</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.

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