我在一些HTML代码中有两个<span>沿着以下JS脚本：

for(let i = 0; i < 2; i++){
    document.head.prepend(document.createElement("style"))
}
const duration = 5
const set_animation = (view_index, submenu, opacity_end) => {
    const opacity_start = window.getComputedStyle(submenu).getPropertyValue("opacity")
    document.head.querySelectorAll("style")[view_index].innerHTML = `@keyframes anim${view_index} {0% {opacity: ${opacity_start}} 100% {opacity: ${opacity_end}}}}`
    submenu.style.animation = `anim${view_index} ${Math.abs(opacity_end - opacity_start) * duration}s forwards`
}
let i = 0
document.querySelectorAll(".submenu").forEach((submenu) => {
    let i_ = i
    submenu.addEventListener("mouseenter", (event) => {
        console.log("enter", i_)
        set_animation(i_, submenu, 0)
    })
    submenu.addEventListener("mouseleave", (event) => {
        console.log("leave", i_)
        set_animation(i_, submenu, 1)
    })
    i++
})

当鼠标进入<span.submenu>时，会添加一个不透明度缓慢降低到0的动画，当鼠标离开时，会添加一个不透明度缓慢升高到1的动画。

在实践中，第一次输入似乎工作得很好，但当我离开组件时，它的不透明度（至少在视觉上）设置回1，当重新输入时，就像计时器仍然在后台运行，不透明度立即设置回从现在到第一次计时器开始的时间百分比。
为什么会发生这种情况，我如何才能实现我刚才解释的预期行为？
如果你想知道，我不能用CSS:hover实现这一点，因为这是我的代码的简单版本，在真实的的一个跨度的褪色行为是由鼠标进入和离开它的容器之一触发。