Bootstrap 4 Modal animation with animate.css | Bootstrap 4 Modal con animación usando animate.css
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with Animation
</button>
<!-- Modal -->
<div class="modal modalAnimate fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-animation-in="fadeInLeft" data-animation-out="bounceOut">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
CSS
.modal.fade{opacity:1}
.modal.fade .modal-dialog{-webkit-transform:translate(0);-moz-transform:translate(0);transform:translate(0)}
function modalAnimation(animation) {
$('.modal .modal-dialog').attr('class', 'modal-dialog ' + animation + ' animated');
};
$('.modalAnimate').on('show.bs.modal', function (e) {
var anim = $(this).attr('data-animation-in');
modalAnimation(anim);
});
$('.modalAnimate').on('hide.bs.modal', function (e) {
var anim = $(this).attr('data-animation-out');
modalAnimation(anim);
});