JavaScript多ID文本切换动画仅单个生效问题及解决咨询

技术原因 #

你编写的changeText函数中，item变量未使用let/const声明，导致它成为全局变量。当连续调用两次changeText时：

• 第一次调用时，全局item被赋值为random1元素，同时启动第一个动画；
• 第二次调用会立即覆盖全局item为random2元素，启动第二个动画；
• 等第一次动画的onfinish回调执行时，它引用的item已经是被覆盖后的random2，因此只会修改第二个元素的文本，第一个元素的文本始终不会被更新。

修复方案 #

给item添加let声明，将其转为函数局部变量，这样每次调用changeText都会创建独立的变量实例，避免互相干扰：

function changeText(id, newText) {
    // 新增let声明，将item变为函数局部变量
    let item = document.getElementById(id);
    if (item === null) {
        return false
    }
    let animation = item.animate([
        {transform: 'translateY(0px)', opacity: '1'},
        {transform: 'translateY(1px)', opacity: '0.9'},
        {transform: 'translateY(4px)', opacity: '0.7'},
        {transform: 'translateY(9px)', opacity: '0.5'},
        {transform: 'translateY(14px)', opacity: '0.3'}
    ], {
        duration: 500,
    });
    animation.onfinish = function () {
        item.innerText = newText;
        item.animate([
            {transform: 'translateY(14px)', opacity: '0.3'},
            {transform: 'translateY(9px)', opacity: '0.5'},
            {transform: 'translateY(4px)', opacity: '0.7'},
            {transform: 'translateY(1px)', opacity: '0.9'},
            {transform: 'translateY(0px)', opacity: '1'}
        ], {
            duration: 500,
        });
    };
}

修改后连续调用两个元素的changeText方法，两个元素都会正常执行动画并更新文本。

内容的提问来源于stack exchange，提问作者g-pane