Question

在transitionend或animationend动画结束后，我尝试了transition和keyframes来更改css。我制作了两个变体的示例，它们均按预期工作：toggle或动画结束时，我可以class和transition。悬停时，我开始过渡/动画，并在JavaScript中切换一个类，该类在过渡/动画更改后会更改background-color。

唯一的区别是，当我将鼠标移出并且div返回到原始状态时，使用transition和transitionend，将删除该类，并且可以看到原始的background-color。对于keyframes动画和animationend，类和background-color也会保留，即使在我将鼠标移出时也是如此。如何为animationend获得与transition相同的行为？

var boxTransition = document.getElementById("transition");
var boxAnimation = document.getElementById("animation");

/* add class after transition ends */
boxTransition.addEventListener("transitionend", changeBackground);

/* add class after keyframes animation ends */
boxAnimation.addEventListener("animationend", changeBackground);

function changeBackground() {
  this.classList.toggle("box--end");
}

.box {
  height: 100px;
  margin-bottom: 30px;
  width: 100px;
}

.box--transition {
  background-color: lightcoral;
  transition: width 0.5s ease-in-out;
}

.box--transition:hover {
  width: 300px;
}

.box--animation {
  background-color: lightblue;
}

.box--animation:hover {
  animation: animateWidth 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

.box--end {
  background-color: gray;
}

@keyframes animateWidth {
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
}

<div id="transition" class="box box--transition"></div>
<div id="animation" class="box box--animation"></div>

Answer 1

您应该注意，动画和过渡效果并不相同，因此此处的事件处理有些琐碎。

我将解释这两种情况。

过渡：它只是元素的更改属性的动画部分。例如，它可以是宽度，高度或颜色。通常是在:hover上分配的。因此，如果用户在转换完成之前将鼠标从元素中移出，它就不会等待动画。

另一方面，

动画：是一套完整的过渡，不关心用户的mouseout事件，一旦开始，它就自己结束。

所以，这是您可以做的。在为transitionend分配切换功能时，这是可以的，因为每当用户将鼠标移出时，过渡就会完成，然后事件会触发，但是对于动画，您应该明确照顾它们。

我所做的是（假设用户将鼠标停留在元素上几秒钟）在动画结束后添加了该类（例如transitionend），然后在用户将鼠标移出该类后删除了该类元素。

这不完全是您应该执行的操作，但是现在您可以了解要执行的操作和时间。

演示：

var boxTransition = document.getElementById("transition");
var boxAnimation = document.getElementById("animation");

/* add class after transition ends */
boxTransition.addEventListener("transitionend", changeBackground);

/* add class after keyframes animation ends */
boxAnimation.addEventListener("animationend", greyOnStart);
boxAnimation.addEventListener("mouseout", revertOnEnd);

function changeBackground() {
  this.classList.toggle("box--end");
}

function greyOnStart(){
  this.classList.add('box--end');
}

function revertOnEnd(){
  this.classList.remove('box--end');
}

.box {
  height: 100px;
  margin-bottom: 30px;
  width: 100px;
}

.box--transition {
  background-color: lightcoral;
  transition: width 0.5s ease-in-out;
}

.box--transition:hover {
  width: 300px;
}

.box--animation {
  background-color: lightblue;
}

.box--animation:hover {
  animation: animateWidth 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

.box--end {
  background-color: gray;
}

@keyframes animateWidth {
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
}

<div id="transition" class="box box--transition"></div>
<div id="animation" class="box box--animation"></div>

Answer 2

我可以为您看到2个选项。首先是在changeBackground上致电boxAnimation.onMouseOut()：

boxAnimation.addEventListener("mouseout", changeBackground);

这将立即更改背景。其次是为.box--animation设置动画而不悬停：

@keyframes animateWidth2 {
  from {
    width: 300px;
  }
  to {
    width: 100px;
  }
}
.box--animation {
  animation: animateWidth2 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

这将像过渡一样工作，但也会在开始时发生。为了防止这种情况的发生，您可以在.box--hovered的{{1}}中向.box添加changeBackground()类，并向.box--animation.box--hovered而不是.box--animation添加动画。 Example用于第二个变体。

删除鼠标悬停时添加了悬停和animationend的类

2 个答案: