仍然在项目 unhover html 上旋转

Posted 2023-03-04

【中文标题】仍然在项目 unhover html 上旋转

【英文标题】：Keep item animated after unhover

【发布时间】：2022-01-20 16:28:15

【问题描述】：

我有一个图标，当您将鼠标悬停在其上时会旋转，但仅在悬停时不会在“取消悬停”时旋转。 但是，当从对象上移除光标时，动画会停止。 即使光标不再在对象上，如何让它恢复动画？ 我的代码：

.header .logo img 
    transform: rotate(0deg);
    transition: transform 0s 0s; 


.header .logo img:hover 
    transform: rotate(360deg);
    transition: transform 1.2s;
    animation-play-state: running;

感谢您提前提供帮助

【问题讨论】：

听起来你想让它一直旋转。是这样吗？

@Adarsh 不，它应该继续旋转，直到它完成如果光标在对象上它会一直做的动画

你需要 javascript

所以这不是它“恢复”旋转的问题，但是一旦悬停它应该一直旋转，即使悬停被移除。对吗？

听起来@Brentspine 希望动画在鼠标悬停在元素上时开始，即使鼠标不再悬停在元素上也结束（或继续运行）。

【参考方案1】：

您需要某种方式让元素“记住”它必须继续旋转。

为此，您需要一些 Javascript 来感知鼠标悬停在元素上的时间以及转换结束的时间。这些事件将分别添加和删除一个类。

const div = document.querySelector('.header .logo img');

function addRotate() 
  div.classList.add('rotate');


function removeRotate() 
  div.classList.remove('rotate');

div.addEventListener('mouseover', addRotate);
div.addEventListener('transitionend', removeRotate);

.header .logo img 
  transform: rotate(0deg);
  transition: transform 0s 0s;


.header .logo img.rotate 
  transform: rotate(360deg);
  transition: transform 1.2s;

<div class="header">
  <div class="logo">
    <img src="https://picsum.photos/id/1015/200/300">
  </div>
</div>