Question

我在模态上有自动scaleIn动画，按下按钮后又有scaleOut。这应该确实很容易，但是我得到了意外的行为-无限循环（当我关闭模态时，它将显示另一个时间）。您能为我解释这种情况，并给出解决方法的提示吗？

致谢

const modal = document.getElementsByClassName("modal")[0];
modal.addEventListener("click", closeModal);

function closeModal() {
  modal.classList.remove("scaleIn");
  modal.classList.add("scaleOut");
  setTimeout(() => {
    modal.classList.remove("scaleOut");
  }, 1000);
};

.modal {
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 250px;
  background-color: #e58e26;
  border-radius: 20px;
  border: solid 10px gray;
}

.scaleIn {
  animation-name: scaleIn;
  animation-duration: 0.5s;
}

.scaleOut {
  animation-name: scaleOut;
  animation-duration: 1s;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1.0);
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(1.0)
  }
  30% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(0);
    display: none;
  }
}

<div class="frame">
  <div class="center">
    <div class="modal scaleIn">
      <div class="content">
        <i class="fas fa-exclamation-triangle"></i>
        <h2>Error!</h2>
        <span>An error has occured while creating an error report</span>
      </div>
      <button>Dismiss</button>
    </div>
  </div>
</div>

停止无限CSS循环

0 个答案: