CSS变量失效致旋转与悬浮动画异常的技术求助

核心问题分析 #

1. 直接通过element.style.transform设置旋转，会覆盖CSS动画中的transform属性，导致悬浮动画失效
2. CSS变量--degrees未定义初始值，动画中的rotate(var(--degrees))无法生效
3. 通过字符串匹配transform值判断当前角度，极易因浏览器格式差异出错（比如空格、单位写法）
4. 仅左方向键分支设置了--degrees，其他方向键未同步，导致动画无法跟随旋转

修复步骤 #

1. 调整CSS：定义变量默认值，优化动画transform顺序 #

修改Style.css，确保悬浮位移基于旋转后的坐标系，同时给--degrees设置初始值：

.jotaro {
    position: relative;
    width: 300px;
    height: 400px;
    top: 0;
    left: 0;
    /* 定义CSS变量默认值 */
    --degrees: 0deg;
    transition: top 0.1s, left 0.1s;
    /* 持续悬浮动画 */
    animation: hover 1s linear infinite;
}

@keyframes hover {
    0%, 100% {
        /* 先旋转再位移，保证悬浮方向固定 */
        transform: rotate(var(--degrees)) translateY(0);
    }
    50% {
        transform: rotate(var(--degrees)) translateY(-5px);
    }
}

2. 重构JS：用变量记录角度，避免直接覆盖transform #

修改Home.js的按键事件逻辑，用单独变量记录当前旋转角度，通过CSS变量控制旋转，不再直接设置style.transform：

// 初始化角色位置和角度
let jotaro = document.getElementById('idleJotaro');
let jotaroX = 0;
let jotaroY = 0;
let currentDeg = 0; // 用变量记录当前旋转角度

function moveJotaro(event){
    event.preventDefault(); // 防止页面滚动
    switch(event.key){
        case "ArrowDown":
            currentDeg = -180;
            jotaroY += 10;
            jotaro.style.top = jotaroY + "px";
            jotaro.src = "static/flyup.png";
            break;
        
        case "ArrowUp":
            currentDeg = 0;
            jotaroY -= 10;
            jotaro.style.top = jotaroY + 'px';
            jotaro.src = "static/flyup.png";
            break;
        
        case "ArrowRight":
            currentDeg = 90;
            jotaroX += 10;
            jotaro.style.left = jotaroX + 'px';
            jotaro.src = "static/flyup.png";
            break;

        case "ArrowLeft":
            currentDeg = -90;
            jotaroX -= 10;
            jotaro.style.left = jotaroX + 'px';
            jotaro.src = "static/flyup.png";
            break;
        
        default: 
            jotaro.src = "static/image-removebg-preview__3_-removebg-preview.png";
            break;
    }
    // 统一设置CSS变量，同步旋转角度到动画
    jotaro.style.setProperty('--degrees', currentDeg + 'deg');
}

// 绑定按键事件
document.addEventListener('keydown', moveJotaro);

3. 优化细节 #

• 移除了JS中多余的jotaro.classList.remove("anim")，因为默认已经启用了hover动画
• 添加event.preventDefault()避免方向键触发页面滚动
• 简化角度判断逻辑，直接设置目标角度，不用复杂的分支匹配字符串

效果说明 #

修改后，角色在按下方向键时：

• 会同步更新旋转角度（通过CSS变量传递给动画）
• 保持持续的悬浮上下抖动效果
• 移动逻辑和旋转、动画完全解耦，不会再出现覆盖冲突

内容的提问来源于stack exchange，提问作者Beginnercoder