Импульсный эффект не работает внутри bootstrap Модал

Question

Мой импульсный эффект не работает внутри модального bootstrap. Тем не менее, он отлично работает вне его.

Отлично работает на обычной странице. Не работает внутри модального bootstrap. Я не знаю, почему модал блокирует этот эффект. Что мне делать?

$(document).ready(function() {
  // Heart Beat
  var timeoutThrottle, back = true;
  $('#seventyfive').on('transitionend', function(e) {
    clearTimeout(timeoutThrottle);
    timeoutThrottle = setTimeout(function() {
      back = !back;
      pulse(back);
    }, 0);
  });
  var pulse = (function pulse(back) {
    $('#seventyfive').toggleClass('heartBeat', back);
    return pulse;
  })(back);
});

.heart {
  color: #eb5e28;
  -webkit-animation: heathing 1s ease infinite;
  animation: heathing 1s ease infinite;
  position: absolute;
  font-weight: bold;
  width: auto;
  height: 15px !important;
}

#seventyfive {
  position: absolute;
  font-weight: bold;
  /* margin-left: -22px; */
  /* margin-top: 3px; */
  font-size: 15px;
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
}

#seventyfive.heartBeat {
  font-size: 16px;
  opacity: .5;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Launch demo modal</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body new-match">
        <div class="title">Hi Love <i class="fa fa-heart heart" id="seventyfive"></i></div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы можете просто использовать Bootstrap модальные события : shown.bs.modal и hidden.bs.modal.

$('#exampleModalCenter').on('shown.bs.modal', function (e) {
  $('#seventyfive').addClass('heartBeat');
})
$('#exampleModalCenter').on('hidden.bs.modal', function (e) {
  $('#seventyfive').removeClass('heartBeat');
})

Класс heartBeat будет добавлен при показе модала и удален при скрытии.