悬停单个ball元素暂停动画及显示下层图片问题求助

问题原因分析 #

1. 动画无法暂停：原代码中animate函数无论isHovered状态如何都会调用requestAnimationFrame(animate)，导致即使标记了悬停状态，动画循环仍在持续执行，cancelAnimationFrame只能取消单次帧请求，无法终止整个动画循环。
2. CSS hover失效：JS直接给元素设置行内transform样式，行内样式的权重远高于CSS类选择器，导致CSS中定义的hover状态样式被完全覆盖，无法触发图片显示效果。

解决方案 #

1. 修复动画暂停逻辑 #

调整animate函数的执行逻辑，仅在元素未被悬停时继续请求下一帧动画，彻底终止悬停时的动画循环：

2. 避免行内样式覆盖CSS #

使用CSS自定义属性（变量）替代行内transform赋值，让JS只负责修改变量值，CSS负责应用样式，保证hover状态的CSS样式优先级正常生效。

修改后的完整代码 #

const balls = document.querySelectorAll('.ball');

// 实现单个Ball的摇摆动画
function swayBall(ball, offsetAngle) {
    const amplitude = Math.random() * 1 + 1; 
    const speed = Math.random() * 0.02 + 0.01; 

    let angle = offsetAngle; 
    let isHovered = false; 
    let animationId; 

    function animate() {
        if (!isHovered) {
            angle += speed; 
            const swayAngle = Math.sin(angle) * amplitude; 
            // 通过CSS变量传递摇摆角度，替代行内transform
            ball.style.setProperty('--sway-angle', `${swayAngle}deg`);
            // 仅未悬停时继续请求下一帧动画
            animationId = requestAnimationFrame(animate); 
        }
    }

    // 启动动画
    animate();

    // 悬停时暂停动画并复位
    ball.addEventListener('mouseenter', () => {
        isHovered = true; 
        ball.style.setProperty('--sway-angle', '0deg');
        console.log(`Hover started on:`, ball); 
    });

    // 离开时恢复动画
    ball.addEventListener('mouseleave', () => {
        isHovered = false; 
        animate(); 
        console.log(`Hover ended on:`, ball); 
    });
}

// 为所有Ball初始化动画
balls.forEach((ball, index) => {
    const offsetAngle = Math.random() * Math.PI * 2; 
    swayBall(ball, offsetAngle);
});

对应CSS调整 #

需要在.ball的基础样式中添加CSS变量的应用：

.ball {
    /* 保留原有样式 */
    transform: rotate(var(--sway-angle, 0deg));
    /* 可选：添加过渡效果让状态切换更平滑 */
    transition: transform 0.3s ease;
}

/* 你的hover显示图片样式现在可以正常生效 */
.ball:hover .target-image {
    display: block;
    /* 若需要修改transform，直接设置即可，无行内样式冲突 */
}

效果说明 #

修改完成后：

• 悬停单个Ball元素时，该元素的摇摆动画会立即暂停并复位，其余Ball元素保持动画运行
• CSS中定义的hover显示图片功能不再被行内样式覆盖，可正常触发

内容的提问来源于stack exchange，提问作者Paweł Dżabba