Javascript js函数中的css动画调用不起作用

有人能帮我吗？ 函数remove（）应该在提交表单时将div移开。然而，这并没有发生。代码中有什么错误

代码的要点是

片段：

函数删除（）{
document.querySelector（'.昵称'）.style.animationPlayState='running'；
警报（“表格已提交”）；
};
@向上设置关键帧{
从{
不透明度：1；
排名：0；
身高：100%；
线高：100%；
}
到{
不透明度：0；
顶部：-110vh；
高：0；
线高：0；
}
}
.昵称{
显示器：flex；
弯曲方向：行；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
保证金：0；
对齐项目：居中；
证明内容：中心；
不透明度：1；
动画名称：向上；
动画持续时间：1s；
动画填充模式：正向；
动画播放状态：暂停；
}

你好！选择您的昵称：
您正在将
remove
函数绑定到表单的
onsubmit
事件

默认情况下，所有表单
submit
事件都将重新加载页面。因此，您的
js
将无法工作

因此，您需要做的是：

function remove() {
    document.querySelector('.nickname').style.animationPlayState = 'running';
    alert('The Form was submitted');

    // run your ajax code to submit the form
    $.ajax({ blah blah});

    return false;       // do not submit the form

};

但是，如果您这样做，您的表单将不会被提交（但您的javascript将起作用）。因此，当您将
remove
函数绑定到表单的
onsubmit
事件时，可以在显示警告消息后使用ajax发布表单

默认情况下，所有表单
submit
事件都将重新加载页面。因此，您的
js
将无法工作

因此，您需要做的是：

function remove() {
    document.querySelector('.nickname').style.animationPlayState = 'running';
    alert('The Form was submitted');

    // run your ajax code to submit the form
    $.ajax({ blah blah});

    return false;       // do not submit the form

};

但是，如果您这样做，您的表单将不会被提交（但您的javascript将起作用）。因此，您可以在显示警告消息后使用ajax发布表单
浏览器通常不关心这些内容，因为提交表单会触发这些内容，因为这通常意味着当前文档将被替换。如果您在单击“提交”按钮时触发它，它可能会工作。动画确实可以工作，但由于表单提交，它无法可视化。您的选择是忽略表单提交上的动画，或者从提交事件处理程序内部手动提交表单数据。以下是实现的JIST，用于防止表单提交，以便您可以看到动画按设计工作。当提交表单触发这些内容时，浏览器通常不关心这些内容，因为这通常意味着当前文档将被替换。如果您在单击“提交”按钮时触发它，它可能会工作。动画确实可以工作，但由于表单提交，它无法可视化。您的选择是忽略表单提交上的动画，或者从提交事件处理程序内部手动提交表单数据。以下是实现的JIST，用于防止表单提交，以便您可以看到动画按设计工作。我猜他们想提交表单数据……是的，我认为这超出了问题的范围：css动画调用js函数不起作用，但是的，当然你是正确的，可以使用ajax处理，或者按照你的建议使用点击事件JavaScript动画起作用，但是正如你正确指出的，页面在动画效果实际被可视化之前被重新加载。我计划使用Ajax传输表单数据我猜他们想提交表单数据…是的，我认为这超出了问题的范围：js函数中的css动画调用不起作用，但你当然是对的，可以使用ajax处理，也可以按照您的建议使用click Event JavaScript动画确实可以工作，但正如您正确指出的，页面在动画实际显示效果之前会重新加载。我计划使用ajax传输表单数据