'Animate.css exit not working for bootstrap modal

I have a simple page that will display a bootstrap modal from a link. I added animate.css to give it some style when it is shown. All works great when you click on the link, the modal bounces in from the left. However, when the modal is dismissed, it just disapears. no animation whatsoever, (it's supposed to bounce out from the right). Im stumped.

<!DOCTYPE html>
<html>
<head>
   <title>modal test</title>
   <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" referrerpolicy="no-referrer" rel="stylesheet">
   <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
   <style>


 @media (min-width: 576px)
        {
   .modal-dialog {
    max-width: 400px;
   }
    .modal-content {
      padding: 1rem;
   }

   .close {
    margin-top: -1.5rem;
   }

   .form-title {
   margin: -2rem 0rem 2rem;
   }

   .btn-round {
   border-radius: 3rem;
   }

   .delimiter {
   padding: 1rem;  
   }

   .signup-section {
   padding: 0.3rem 0rem;
   }


   }

   </style>
   <script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
   </script>
   <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
   </script>
</head>
<body>
   <a href="#" onclick="myFunction()">Member Login</a>
   <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal" id="loginModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header border-bottom-0">
               <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
               <div class="form-title text-center">
                  <h4>Login</h4>
               </div>
               <div class="d-flex flex-column text-center">
                  <form>
                     <div class="form-group">
                        <input class="form-control" id="email1" placeholder="Your email address..." type="email">
                     </div>
                     <div class="form-group">
                        <input class="form-control" id="password1" placeholder="Your password..." type="password">
                     </div><button class="btn btn-info btn-block btn-round" type="button">Login</button>
                  </form>
               </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
               <div class="signup-section">
                  Not a member yet? <a class="text-info" href="#a">Sign Up</a>.
               </div>
            </div>
         </div>
      </div>
   </div>
   <script>
   function myFunction() {
     
   setTimeout( function(){
             $('#loginModal').modal('show');
     }, 1000);

   };


   </script> 
   <script>
   $('#loginModal').on('show.bs.modal', function (e) {
     $('.modal .modal-dialog').attr('class', 'modal-dialog modal-dialog-centered animate__animated animate__bounceInLeft');
   })
   $('#loginModal').on('hide.bs.modal', function (e) {
     $('.modal .modal-dialog').attr('class', 'modal-dialog modal-dialog-centered animate__animated animate__bounceOutRight');
   })
   </script> 
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Animate.css exit not working for bootstrap modal

Sources

Related Questions