вызов анимации css в js-функции не работает

Question

Может кто-нибудь помочь мне с этим?Функция remove () должна убрать div при отправке формы.Однако этого не происходит.Что не так в коде?

Суть кода здесь .

фрагментов:

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, чтобы опубликовать форму после отображения сообщения с предупреждением