Bootstrap 4 Modal animation ✔ Modal con animación【Animate.CSS】

Bootstrap 4 Modal animation with animate.css | Bootstrap 4 Modal con animación usando animate.css

By Stelios Ioannides

DEMO

<!-- 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">&times;</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">

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