Question

有人可以帮我吗？提交表单后，函数remove（）应该将div移开。但是，这不会发生。代码有什么问题？

代码的要旨是here。

摘要：

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

@keyframes up {
	from { 
		opacity: 1;
		top: 0;
		height: 100%;
		line-height: 100%;
	}
	to {
		opacity: 0;
		top: -110vh;
		hight: 0;
		line-height: 0;
	}
}
.nickname {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	align-items: center;
	justify-content: center;
	opacity: 1;
	animation-name: up;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

<div class="nickname">
    <form onsubmit="remove()" method="POST">
        <fieldset>
            <legend><h3>Hi there! Choose your nickname:</h3></legend>
            <input type="text" name="username" placeholder="Nickname" size="60" autocomlete="off">
            <input type="text" name="useremail" placeholder="Email" size="60" autocomlete="off">
            <input type="submit" value="Save">
        </fieldset>
    </form>
</div>

Answer 1

您将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可以使用）。因此，您可以在显示警报消息后使用ajax发布表单

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

1 个答案: