單擊按鈕時如何將此動畫類別新增至模式？

Question

我希望當我單擊模態上的“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>

Answer 1

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