我希望当我单击模态上的“x”按钮时发生动画，但当前发生的情况是模态在没有它的情况下关闭，然后再次打开模态时，动画会在不单击任何内容的情况下发生。
这是我当前的动画类代码：
.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;
}
}
这是我的 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> 
.cont { /* some css here */ } .cont.scale-out-center { animation: myAnimation 1s forwards; }在 javascript 中，当单击按钮添加元素横向扩展中心类时，动画将启动，如我的代码中所示，它将运行 1 秒。您可以在js中设置Timeout并在1秒内关闭模态。这是简单的解决方案。
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 ") })