Ich möchte, dass die Animation ausgeführt wird, wenn ich auf dem Modal auf die Schaltfläche „x“ klicke. Derzeit wird das Modal jedoch ohne X geschlossen.
Das ist mein aktueller Code für den Animationskurs:
.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;
}
}
Das ist mein 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> 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
.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 ") })