输入框搜索值再次匹配时元素多次闪绿的问题排查

问题现象 #

在输入框执行搜索操作时，列表项按规则显示/隐藏并伴随动画：

• 匹配且此前隐藏的项：应触发一次flash_green动画后显示
• 不匹配且此前显示的项：应触发flash_red动画后隐藏
  实际测试（输入123后依次删除3、2）时，匹配项会闪烁2-3次，且flash_green触发后transitionend事件未执行，类名残留。

原因分析 #

1. flash_green缺少transition属性：CSS中仅flash_red定义了transition: opacity 0.5s，flash_green无此属性，导致无法触发transitionend事件，类名无法自动清除，后续输入变化时重复触发动画。
2. 动画迭代次数错误：animation-iteration-count: 3设置动画执行3次，违背“仅闪烁一次”的需求。
3. opacity值无效：flash_green中opacity: 100是非法值，应为1。
4. transitionend逻辑冲突：处理flash_red时先设置hidden，后续又统一清除类名，逻辑混乱。

修复方案 #

1. 修正CSS样式 #

调整动画迭代次数，为flash_green添加transition属性，修正opacity值：

#list_of_stuff li.flash_red {
    animation: flash_red 0.5s;
    animation-iteration-count: 1; /* 改为仅执行1次 */
    transition: opacity 0.5s;
    opacity: 0;
}

@keyframes flash_red {
    0% { background-color: red; }
    50% { background-color: transparent; }
    100% { background-color: red; }
}

#list_of_stuff li.flash_green {
    animation: flash_green 0.5s;
    animation-iteration-count: 1; /* 改为仅执行1次 */
    transition: opacity 0.5s; /* 添加transition，触发transitionend */
    opacity: 1; /* 修正为有效值 */
}

@keyframes flash_green {
    0% { background-color: green; }
    50% { background-color: transparent; }
    100% { background-color: green; }
}

.hidden {
  display: none !important;
}

2. 调整transitionend事件逻辑 #

简化逻辑，避免冲突：

function transition_ended(event) {
    let element = event.target;

    logTextarea.value += `Transition ended for ${element.tagName}, at this point className is ${element.className}\n`;

    if (element.className === 'flash_red') {
        element.className = 'hidden';
    } else if (element.className === 'flash_green') {
        element.className = '';
    }
}

3. 优化类名操作（可选） #

使用classList代替直接赋值className，避免类名覆盖风险：

function search_value() {
    const searchString = document.querySelector('input#search_input').value.toLowerCase();
    const list_elements = document.querySelectorAll('ul#list_of_stuff li');
    list_elements.forEach(list_element => {
        const list_element_value = list_element.textContent.toLowerCase();

        if (list_element_value.includes(searchString)) {
            if (list_element.classList.contains('hidden')) {
                list_element.classList.remove('hidden');
                list_element.classList.add('flash_green');
            }
        } else {
            if (!list_element.classList.contains('hidden')) {
                list_element.classList.add('flash_red');
            }
        }
    });
}

修复效果 #

• 匹配项仅触发一次绿色闪烁，transitionend事件正常执行，类名自动清除
• 不匹配项触发一次红色闪烁后隐藏，逻辑正常
• 类名操作更安全，无意外覆盖问题

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