javascript - JS ADDEventListener 动画结束触发过早

Question

我需要使用 js 平滑过渡地更改元素的宽度和高度。我的想法是向元素添加一个类，使过渡平滑，更改宽度和高度，一旦过渡完成，再次删除该类。我使用以下代码:

    element.classList.add("smoothTransition")
    element.classList.toggle("fullscreen")
    element.addEventListener("webkitAnimationEnd", element.classList.remove("smoothTransition"));
    element.addEventListener("animationend", element.classList.remove("smoothTransition"));

遗憾的是没有发生任何转变。如果没有事件监听器，转换就会发生。此外，事件监听器会在转换开始后立即触发。

Answer 1

您的问题出在您的 addEventListener 中:

element.addEventListener("webkitAnimationEnd", element.classList.remove("smoothTransition"));
element.addEventListener("animationend", element.classList.remove("smoothTransition"));

addEventListener 的第二个参数必须是一个函数，而不是函数调用的结果(在您的情况下未定义)。因此，将前面的行更改为:

element.addEventListener("webkitAnimationEnd", function(e) {
    this.classList.remove("smoothTransition")
});
element.addEventListener("animationend", function(e) {
    this.classList.remove("smoothTransition")
});

您可以考虑在转换之前添加事件监听器。

document.addEventListener("DOMContentLoaded", function(e) {
  var element = document.querySelector('.box');
  element.addEventListener("webkitAnimationEnd", function(e) {
      this.classList.remove("smoothTransition");
      console.log('webkitAnimationEnd');
  });
  element.addEventListener("animationend", function(e) {
      this.classList.remove("smoothTransition");
      console.log('animationend');
  });
  element.classList.add("smoothTransition")
  element.classList.toggle("fullscreen")
});

.box {
    width: 150px;
    height: 150px;
    background: red;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
@keyframes colorchange {
    0% { background: yellow }
    100% { background: blue }
}
.smoothTransition {
    animation: colorchange 2s;
}
.fullscreen {
    width: 100%;
    height: 100vh;
}

<div class="box"></div>