1

我已经尝试了transitionendand在动画结束animationend后更改我的 CSS transition。keyframes我用两个变体做了一个例子，它们按预期工作：当 a或动画结束时，我可以togglea 。悬停时，我开始转换/动画，并在转换/动画更改后切换一个类，该类会更改 。classtransitionJavaScriptbackground-color

唯一的区别是，当我执行 mouseout 并且 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>

4

2 回答 2

3

您应该注意动画和过渡是不一样的，因此这里的事件处理有点棘手。

我将解释他们两个身上会发生什么。

过渡：它只是元素变化属性的动画部分。例如，它可以是宽度或高度或颜色。它: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>

于 2018-10-24T06:25:11.533 回答
1

我可以为您看到 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类添加到.boxinchangeBackground()并将动画添加到.box--animation.box--hovered而不是仅.box--animation. 第二种变体的示例。

于 2018-10-24T06:28:09.987 回答