Question

我创建了一个按钮，您可以在其中单击它。然后它启动一个 CSS 动画，其中一些按钮和文本沿着屏幕向下流动，说你确定要这样做吗？然后他们可以单击是或否按钮，我希望它反转动画。我已经完成了向下的动画，但我无法在他们单击按钮时重复该动画返回。

这是 HTML：

<button onclick="confirm()">Delete</button>

<div id="wholeshow" class="confirm-whole">
    <h1 class="confirm">Delete</h1>
    <p class="confirm">Are you sure you want to delete ____?</p>
    <button class="confirm" onclick="reset()">Delete</button>
    <button class="confirm" onclick="cancel()">Cancel</button>
</div>

这是JS：

function confirm() {

document.getElementById("wholeshow").classList.add("add");
}

这里是 CSS：

.confirm-whole {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
    animation: slideIn 0.5s forwards;
}

@keyframes slideIn {

    0% {
        top: -250px;
        height: 0%;
    }

    99% {
        height: 0%;
    }

    100% {
        top: 0px;
        height: 100%;
    }
}

.add {
    display: block;
}

非常感谢您的帮助！

Answer 1

JavaScript 并不漂亮，但它可以工作，如果 CSS 过渡能够支持您的动画要求，也许更好的解决方案是使用它们。

function confirm() {
  document.getElementById("wholeshow").classList.add("add");
}

// added
function reset() {
  const wholeshow = document.getElementById("wholeshow");
  const resetDir = () => { // need to reset the animation direction and remove the `add` class
    wholeshow.removeEventListener("animationend", resetDir, true);
    wholeshow.style.animationDirection = "normal";
    wholeshow.classList.remove("add");
  };

  wholeshow.addEventListener("animationend", resetDir, true);
  wholeshow.style.animationDirection = "reverse";
  wholeshow.classList.remove("add");
  void wholeshow.offsetWidth; // force rerender
  wholeshow.classList.add("add");
}

.confirm-whole {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: grey;
  animation: slideIn 0.5s;
}

@keyframes slideIn {
  0% {
    top: -250px;
    height: 0%;
  }
  99% {
    height: 0%;
  }
  100% {
    top: 0px;
    height: 100%;
  }
}

.add {
  display: block;
}

<button onclick="confirm()">Delete</button>

<div id="wholeshow" class="confirm-whole">
  <h1 class="confirm">Delete</h1>
  <p class="confirm">Are you sure you want to delete ____?</p>
  <button class="confirm" onclick="reset()">Delete</button>
  <button class="confirm" onclick="cancel()">Cancel</button>
</div>

单击一个按钮启动动画，然后单击另一个按钮反转该动画

1 个答案: