Bagaimanakah saya boleh menambah kelas animasi ini kepada modal apabila butang diklik?

Question

Saya mahu animasi berlaku apabila saya mengklik butang "x" pada modal tetapi pada masa ini apa yang berlaku ialah modal ditutup tanpa ia dan kemudian apabila saya membuka modal sekali lagi animasi berlaku tanpa mengklik apa-apa berlaku.

Ini ialah kod kelas animasi semasa saya:

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

Ini kod JavaScript saya:

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

Dalam javascript, apabila butang diklik untuk menambah elemen secara mendatar mengembangkan kelas tengah, animasi akan bermula seperti yang ditunjukkan dalam kod saya dan ia akan berjalan selama 1 saat. Anda boleh menetapkan Tamat Masa dalam js dan menutup modal dalam 1 saat. Ini adalah penyelesaian yang mudah.

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 ")
})