When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved.
Below is my current animation class code:
.scale-out-center {
-webkit-animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
@keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
And here is my JavaScript code:
<script>
var hideDelay = true;
document.querySelector('#myModal').addEventListener('hide.bs.modal', function(e) {
if (hideDelay) {
document.querySelector('.modal-content').classList.add('scale-out-center');
hideDelay = false;
setTimeout(function() {
document.querySelector('#myModal').modal('hide');
document.querySelector('.modal-content').classList.remove('scale-out-center');
}, 5000);
return false;
}
hideDelay = true;
return true;
});
</script>