Comment puis-je ajouter cette classe d'animation à un modal lorsqu'on clique sur un bouton ?

Question

Je veux que l'animation se produise lorsque je clique sur le bouton "x" du modal, mais actuellement, ce qui se passe, c'est que le modal se ferme sans lui, puis lorsque j'ouvre à nouveau le modal, l'animation se produit sans que rien ne se produise.

Voici mon code de cours d'animation actuel :

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

Voici mon code JavaScript :

<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>

Answer 1

.cont {
    /* some css here */
}
.cont.scale-out-center {
    animation: myAnimation 1s forwards;
}

En javascript, lorsque vous cliquez sur le bouton pour ajouter l'élément en élargissant horizontalement la classe centrale, l'animation démarrera comme indiqué dans mon code et s'exécutera pendant 1 seconde. Vous pouvez définir Timeout dans js et fermer le modal en 1 seconde. C'est la solution simple.

let cont = document.querySelector('.cont')
let btn = document.querySelector('.btn')
btn.addEventListener("click", ()=>{
    // when you add this class to any element animation will be start
    cont.classList.add("scale-out-center ")
})