Animation when exiting a modal

Expected behavior

When the modal exits the should be a zoomOutUp animation.

Actual behavior

It just exists, no animation.

Resources (screenshots, code snippets etc.)

Modal:

    <!--Modal cascading tabs-->
    <div class="modal-c-tabs">

      <!-- Nav tabs -->
      <ul class="nav nav-tabs md-tabs tabs-2 user-modal-tabs " role="tablist">
        <li class="nav-item waves-effect">
          <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
            Inicia sesión</a>
        </li>
        <li class="nav-item waves-effect">
          <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
            Regístrate</a>
        </li>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
        </button>
      </ul>

      <!-- Tab panels -->
      <div class="tab-content">
        <!--Panel 7-->
        <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

          <!--Body-->
          <div class="modal-body mb-1">
            <div class="md-form form-sm mb-5">
              <i class="fas fa-envelope prefix"></i>
              <input type="email" id="modalLRInput10" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput10">Nombre de usuario o correo
                electrónico</label>
            </div>

            <div class="md-form form-sm mb-4">
              <i class="fas fa-lock prefix"></i>
              <input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput11">Contraseña</label>
            </div>
            <div class="text-center mt-2">
              <button class="btn btn-primary">Iniciar sesión</button>
            </div>
          </div>
          <!--Footer-->
          <div class="modal-footer">
            <div class="options text-center text-md-right mt-1">
              <p>Recuperar <a href="#" class="blue-text">contraseña</a></p>
            </div>
          </div>

        </div>
        <!--/.Panel 7-->

        <!--Panel 8-->
        <div class="tab-pane fade" id="panel8" role="tabpanel">

          <!--Body-->
          <div class="modal-body">
            <div class="md-form form-sm mb-5">
              <i class="fas fa-envelope prefix"></i>
              <input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput12">Nombre de usuario (solo
                letras)</label>
            </div>

            <div class="md-form form-sm mb-5">
              <i class="fas fa-envelope prefix"></i>
              <input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput12">Correo electrónico</label>
            </div>
            <div class="md-form form-sm mb-5">
              <i class="fas fa-envelope prefix"></i>
              <input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput12">Repite el correo
                electrónico</label>
            </div>

            <div class="md-form form-sm mb-5">
              <i class="fas fa-lock prefix"></i>
              <input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput13">Contraseña</label>
            </div>

            <div class="md-form form-sm mb-4">
              <i class="fas fa-lock prefix"></i>
              <input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
              <label data-error="wrong" data-success="right" for="modalLRInput14">Repite la contraseña</label>
            </div>

            <div class="text-center form-sm mt-2">
              <button class="btn btn-primary">Regístrate</button>
            </div>

          </div>
        </div>
        <!--/.Panel 8-->
      </div>

    </div>
  </div>
  <!--/.Content-->
</div>

Javascript:

$("#modalLRForm").on('hide.bs.modal', function(){
      $('#modalLRForm').removeClass('animated zoomInUp');
      $('#modalLRForm').addClass('animated zoomOutUp');
    });