Question

当页面加载以及div上发生mouseenter事件时，我会向div添加两个摇动动画

我有一个不同名称的可笑动画，当页面加载时以及悬停div时，我想播放不同名称的shake1和shash2。以下是html，css和js的外观

let $image = document.querySelector("div");
$image.addEventListener("mouseenter", function() {
  $image.style.animationPlayState = "running";
});

div {
  background: red;
  animation-name: shake1;
  animation-duration: .5s;
}

@keyframes shake1 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

div:hover {
  animation-name: shake2;
  animation-duration: .5s;
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<div style="width:100px; height: 100px;">
</div>

我希望摇动动画在页面加载时起作用，并且在div悬停时再次起作用。但是它在页面加载时播放，并且在div上发生mouseenter事件时也播放，并且在鼠标离开div时也播放。我认为当鼠标离开div时，就像页面已加载一样，正在播放加载动画。如何使它按预期工作

Answer 1

我认为此行为是由于您在目标元素上定义了两个不同的动画导致的，因此，当您将animationPlayState设置为“运行”时，它将同时触发这两个动画。

我已更新您的代码以记录当前动画名称：

let $image = document.querySelector(".shake");

$image.addEventListener("animationstart", function(event) {
  console.log(event.animationName);
})

$image.addEventListener("mouseenter", function(event) {
  $image.style.animationPlayState = "running";
});

div.shake {
  background: red;
  animation-name: shake1;
  animation-duration: .5s;
}

@keyframes shake1 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

div.shake:hover {
  animation-name: shake2;
  animation-duration: .5s;
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<div class="shake" style="width:100px; height: 100px;">
</div>

作为解决方法，您可以在mouseleave上将animationPlayState设置为“ paused”：

let $image = document.querySelector("div");
$image.addEventListener("mouseenter", function() {
  $image.style.animationPlayState = "running";
});

$image.addEventListener("mouseleave", function() {
  $image.style.animationPlayState = "paused";
});

div {
  background: red;
  animation-name: shake1;
  animation-duration: .5s;
}

@keyframes shake1 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

div:hover {
  animation-name: shake2;
  animation-duration: .5s;
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<div style="width:100px; height: 100px;">
</div>

即使将鼠标移出，也会触发Mouseenter事件两次

1 个答案: