如何在元素不再悬停后使 CSS 动画持续存在？

Question

我对 CSS3 动画有疑问。 我有一个班级正在帮我制作 SVG 动画，这个班级的名字是“animateCircle”。

我希望当我将鼠标悬停在“输入”上时触发动画。

我已经创建了以下代码：

jQuery('form.newsletter input[type="submit"]').hover(function() {


    jQuery('svg').addClass('animateCircle')

})

问题是，如果我将光标从“输入”元素上移开，动画会突然停止。

理想情况下，我希望动画结束（持续 2 秒），然后类（触发动画）自行删除。我试图设置一个 setTimeOut 但问题仍然存在：当光标不再位于“输入”上时，动画被突然删除。

如果有人有任何想法，将不胜感激！

Answer 1

您必须有一些未在问题中显示的代码删除鼠标悬停时的类；使用给定的代码，动画不会停止。

您可以使用 setTimeout 将其删除，如下所示：

jQuery('form.newsletter input[type="submit"]').hover(function() {
    jQuery('svg').addClass('animateCircle');
    window.setTimeout(() => {
        jQuery('svg').removeClass('animateCircle')
    },2000);
})

这可行，或者足够接近——但这意味着您必须定义持续时间两次：一次在 CSS 中，一次在 javascript 中。很容易在没有意识到的情况下意外破坏它。 （这也意味着如果用户在动画期间多次悬停该元素，您可以轻松堆叠大量同时 setTimeouts。在这种特殊情况下，该 removeClass 触发超出预期是无害的，但这不一定如果你正在做一些具有累积效应的事情，那就是这种情况。另外，不必要地触发事件并不是一个很好的做法。）

这里有一个例子，具体说明如何在动画完成时移除该类，以便下次输入鼠标悬停时再次触发：

// add the class on hover:
jQuery('button').hover(function() {
  jQuery('.animate').addClass('animateCircle')
})

// automatically remove the class when the animation ends:
jQuery('.animate').on('animationend', function() {
  jQuery(this).removeClass('animateCircle')
})

@keyframes example {
  0% {
    tranform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

.animate {
  width: 100px;
  height: 100px;
  background-color: red;
}

.animate.animateCircle {
  background-color: blue; /* <-- so you can see when the class is active */
  animation-name: example;
  animation-duration: 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Hover me</button>


<div class="animate">Animation</div>

（我稍微修改了您的 html 以使其更易于演示，但应该很容易看出如何将其应用于您的 html。）

Answer 2

首先确保您的 CSS 中的 animate 属性未设置为无限运行。然后你需要添加一个事件监听器来等待动画结束移除类。比如：

jQuery('form.newsletter input[type="submit"]').hover(function() {
    jQuery('svg').addClass('animateCircle')
})

$("svg").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
    $(this).removeClass('animateCircle')
})

Answer 3

为了完整起见（因为现在是 2021 年），以下是原生 Javascript，而不是 jQuery。

这种方法将两个EventListeners 附加到要动画的元素上：

• mouseover 添加启动动画的类
• animationend 移除启动动画的类

---

工作示例：

const square = document.getElementsByClassName('square')[0];

const addAnimateSquare = (e) => {
  e.target.classList.add('animateSquare');
}

const removeAnimateSquare = (e) => {
  e.target.classList.remove('animateSquare');
}

square.addEventListener('mouseover', addAnimateSquare, false);
square.addEventListener('animationend', removeAnimateSquare, false);

div {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  cursor: pointer;
}

div.animateSquare {
  animation: rotateSquare 2s linear;
}

@keyframes rotateSquare {
  100% {transform: rotate(1080deg);}
}

<div class="square">Hover me</div>

---

补充说明：

请注意，为了清楚起见，上面的 javascript 故意冗长。

线条：

const addAnimateSquare = (e) => {
  e.target.classList.add('animateSquare');
}

const removeAnimateSquare = (e) => {
  e.target.classList.remove('animateSquare');
}

square.addEventListener('mouseover', addAnimateSquare, false);
square.addEventListener('animationend', removeAnimateSquare, false);

可以直接重写，如下所示：

square.addEventListener('mouseover', (e) => e.target.classList.add('animateSquare'));
square.addEventListener('animationend', (e) => e.target.classList.remove('animateSquare'));