即使鼠标离开也能在悬停时完成动画答案

【问题标题】：Finish animation on hover even mouse leave即使鼠标离开也能在悬停时完成动画
【发布时间】：2022-09-24 01:07:15
【问题描述】：

我正在使用 CSS 关键帧在悬停状态下旋转元素。

即使鼠标在元素实际结束之前离开元素，如何让元素完成其动画？

例如，如果我将鼠标移出元素（停止悬停）而元素仅旋转到 180 度（完整动画为 360 度），它会立即停止动画并返回其原始状态而不是完成动画.

#rotate {
  width: 120px;
  height: 120px;
  background-color: orange;
}

#rotate:hover {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

&lt;div id=\"rotate\"&gt;&lt;/div&gt;

看一下我的答案以获得一些清晰
如果预期的动画只是一个旋转，那么使用过渡规则而不是关键帧动画可能更容易实现此效果。
@Loki，我附上了一个带有工作 jQuery 示例的 sn-p
@Loki 过渡仍然会取消鼠标离开时的动画...

标签： css

【解决方案1】：

您需要为此使用 Javascript，以下 sn-p 使用一些 jQuery 显示，一个工作示例：

$("#rotate").on({
   mouseenter() {
      $(this).addClass("animated"); 
   },
   animationend() {
      $(this).removeClass("animated");  
   },
});

#rotate {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.animated {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

确保类 animated 带有动画，#rotate 是您要旋转的框。

【讨论】：

不错的工作，但是是否可以仅使用 vanilla JavaScript 来实现
香草变得复杂。另一方面，jQuery 是为干净的解决方案而设计的
好像您从过时的资源中复制了此代码。“从 jQuery 3.0 开始，.bind() 已被弃用”.bind() 已弃用，取而代之的是 .on()。这是一个链接to the .bind() DOCS下次使用国外资源时，尽量提供原帖链接或页面链接，给原回答者、发帖者点赞。
编辑并改进了您的代码...

【解决方案2】：

这适用于我的情况，因为它暂停并从停止的地方开始。对于简单的旋转，这感觉比您通常从悬停进出时获得的跳跃要好。

.name-star {
    right: 5px;
    top: 15px;
    animation: 5s rotate infinite;
    animation-play-state: paused;
    animation-timing-function: ease-in;
}

.mat-grid-tile:hover .name-star {
    animation-play-state: running;
}

【讨论】：