让动画在鼠标离开时完成

Posted 2023-03-06

【中文标题】让动画在鼠标离开时完成

【英文标题】：To let the animation complete on mouse leave

【发布时间】：2020-09-04 19:08:12

【问题描述】：

我已经编写了悬停时的关键帧动画。

@keyframes juggle 
    0% transform: skew(15deg, 15deg) translate(0,10px);
    50% transform: skew(-15deg, -15deg) translate(0,-10px);
    100% transform: skew(15deg, 15deg) translate(0,0);

span:hover animation: juggle 1s; 

动画效果很好，但是在鼠标离开时，它会突然停止。 期望即使鼠标离开也能完成动画。

没有jquery可以做到吗？

【参考方案1】：

希望这可行

let section = document.getElementById('homeSection');
let elmnt = section.getElementsByClassName('classname');

for (let i = 0; i < elmnt.length; i++) 
    elmnt[i].addEventListener('mouseenter', function () 
        elmnt[i].classList.add('Juggle');
        setTimeout(function()
            elmnt[i].classList.remove('Juggle')
        ,400)
    )

【参考方案2】：

我相信这是你想要做的事情

span 
  animation-name: juggle-out;
    animation-duration: 1s;
    animation-repeat-count: 1;
    animation-fill-mode: forwards;


span:hover
  animation-name: juggle-in;

@keyframes juggle-in 
    0% transform: skew(15deg, 15deg) translate(0,10px);
    50% transform: skew(-15deg, -15deg) translate(0,-10px);
    100% transform: skew(15deg, 15deg) translate(0,0);


@keyframes juggle-out 
    0% transform: skew(15deg, 15deg) translate(0,10px);
    50% transform: skew(-15deg, -15deg) translate(0,-10px);
    100% transform: skew(0deg, 0deg) translate(0,0);

您应该为 hover in 和 hover out 使用 2 个动画 实际上 CSS 中没有 hover in 和 hover out 这只是一个状态，但animation-fill-mode 起着重要作用 虽然支持不是很好；） 我建议添加类而不是这个

【讨论】：

您的代码会在鼠标离开时触发另一个动画。但我期望的是在悬停期间开始的动画应该完成（不应该在没有完成的情况下结束）。我不希望我的动画结束不完整。我想我在这里表达了我的观点。

使用添加/删除类和 setTimeout 进行删除，并停止重新触发相同的事件，

动画只在悬停时完成一次。当鼠标离开动画在完成动画之前自动停止。即使不删除它也会停止的动画。 我希望我的动画一直持续到结束

可以用纯CSS的一招搞定，嗯，是菜单里的item吗？

不，它只是一个在单独的 span 标签中带有字母的文本。你能解释一下吗，或者指导我参考一些我可以学习的参考资料。

【参考方案3】：

使用 onmouseover 函数添加一个包含动画的类，并使用 settimeout 函数手动删除该类。