解决选择触发<p>元素动画失效问题，探讨直接触发动画方法

一、修复JS添加animateMe类无效的问题 #

你的代码里存在几个关键错误，导致通过JS添加类时动画无法生效，逐一修正如下：

1. 元素ID不匹配 #

代码中多次使用$("#computerScoreText")，但你的HTML里并没有这个ID的元素。对照JS里定义的computerScoreText = $("#computerScore");，先补全HTML的电脑分数模块：

<div class="score">
    <p>Your Score:</p>
    <p id="userScore">0</p>
</div>
<div class="score">
    <p>Computer Score:</p>
    <p id="computerScore">0</p>
</div>

2. 混合使用jQuery与原生JS方法 #

jQuery对象不能直接调用原生addEventListener，必须改用jQuery的.on()方法绑定事件：

// 错误写法
userScoreText.addEventListener("animationend", removeMyClass);
// 正确写法
userScoreText.on("animationend", removeMyClass);

3. jQuery的addClass不支持时长参数 #

原生jQuery的addClass()仅接受类名参数，你写的addClass("animateMe", 2000, removeMyClass)是jQuery UI的语法，未引入jQuery UI时会直接失效。直接简化为：

// 错误写法
userScoreText.addClass("animateMe", 2000, removeMyClass);
// 正确写法
userScoreText.addClass("animateMe");

4. alert阻塞页面渲染 #

alert()会暂停JS执行和页面渲染，导致动画还未播放就被弹窗打断。可以把alert替换为页面内提示元素，或者延迟弹窗触发：

// 示例：先触发动画，再延迟弹出提示
userScore++;
userScoreText.addClass("animateMe").on("animationend", removeMyClass);
setTimeout(() => {
    alert("You won");
    alertUserOfOutcome(userChoice, computerChoice);
}, 100);

5. 优化removeMyClass逻辑 #

不要同时移除两个元素的类，仅操作当前触发动画的元素，避免不必要的冲突：

function removeMyClass() {
    $(this).removeClass("animateMe");
    // 解绑事件，防止重复触发
    $(this).off("animationend", removeMyClass);
}

修正后的game函数关键片段 #

// 用户获胜场景
alert("You won");
userScore++;
userScoreText.addClass("animateMe");
userScoreText.on("animationend", removeMyClass);

// 电脑获胜场景
alert("Computer Won");
computerScore++;
computerScoreText.addClass("animateMe");
computerScoreText.on("animationend", removeMyClass);

二、无需添加/移除CSS类的动画触发方案 #

可以使用浏览器原生的Element.animate() API，直接在JS中定义动画关键帧和播放配置，完全脱离CSS类的依赖：

示例代码 #

// 定义摇晃动画的关键帧
const shakeKeyframes = [
    { transform: 'scale(50%)' },
    { transform: 'rotate(-10deg) scale(1.2)' },
    { transform: 'rotate(10deg) scale(1.2)' },
    { transform: 'rotate(-10deg) scale(1.2)' },
    { transform: 'rotate(10deg) scale(1.2)' },
    { transform: 'rotate(0deg)' }
];

// 动画播放配置
const shakeOptions = {
    duration: 1000, // 动画时长1秒
    iterations: 1   // 播放1次
};

// 封装动画触发函数
function triggerScoreAnimation(element) {
    // 先取消之前未完成的动画（如果存在）
    element.getAnimations().forEach(anim => anim.cancel());
    // 播放新动画
    element.animate(shakeKeyframes, shakeOptions);
}

// 使用示例（用户获胜时）
userScore++;
triggerScoreAnimation(userScoreText[0]); // jQuery对象转原生DOM元素

这个方案的优势：

• 无需维护CSS类，动画逻辑完全在JS中管控
• 可动态调整动画参数（如旋转角度、时长）
• 支持直接控制动画的播放、暂停、取消操作

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