单击按钮时如何将此动画类添加到模式中？

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