鼠标移出元素后无法反转动画，JS事件绑定触发异常求助

你的代码里有两个关键错误导致了这个问题：

1. 页面加载事件绑定错误 #

• 正确的页面加载事件是 window.onload，不是 window.load
• 赋值时不能写 Loaded()，这会立即执行Loaded函数，应该传递函数引用Loaded，让页面加载完成后再触发

2. addEventListener 参数错误 #

• 第一个参数必须是事件名称的字符串："mouseleave"，而不是onmouseleave（这是DOM0级事件的写法）
• 第二个参数是函数引用，不能加括号ReverseAnim()，加括号会立刻执行ReverseAnim函数，应该直接写ReverseAnim，让鼠标移出事件触发时再调用

修正后的JavaScript代码 #

window.onload = Loaded;

function Loaded(){
    LoadImages();
    
    var searchitems = document.getElementById("siip");

    searchitems.addEventListener("mouseleave", ReverseAnim);
}

function LoadImages(){ /// This works and is not a problem
    ...
}

function ReverseAnim(){
   console.log("Test");
}

补充：实现动画反转的建议 #

如果要实现appearbutton动画的反向播放，可以直接修改目标元素的animation属性，比如：

function ReverseAnim(){
   // 获取需要反转动画的input元素（比如submitbutton）
   const targetEl = document.getElementById("subbutt");
   // 设置动画反向播放，并保持结束状态
   targetEl.style.animation = "appearbutton 0.3s reverse forwards";
}

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