Я делаю страницу входа в личный кабинет сайта с использованием jquery:
<div class="logincontainer">
<form method="post" class="logincontainer-form">
<p class="login-inputtext">Логин</p>
<input class="login-input" required placeholder="Введи сюда свой логин"></input>
<div id="login-button"><button class="login-button" type="submit">Далее</button></div>
</form>
</div>
По задумке переход к вводу пароля будет только после ввода логина.
В момент когда пользователь отправляет форму, инпут и кнопка (<button class="login-button"></div>
) пропадают. Появляется плашка с загрузкой по форме такая же как кнопка <div class="login-button-loading showfast_anim"><div class="login-button-loading-icon"></div></div>
. После проверки системой существования логина, плашка исчезает и появляются те же инпут и кнопка уже для ввода пароля.
Вопрос таков: как правильно (и без лишнего мусора) изменять, удалять и добавлять элементы на странице вместе с анимацией (у всех она одинаковая - появление при добавлении элемента, и исчезание при удалении)?
Пример моего варианта решения с огроменнейшим количеством мусора:
//текущий шаг авторизации
var step = "login";
//пользователь отправляет форму
$('.logincontainer-form').submit(function(e) {
//для обработки формы на странице отменяем переход
e.preventDefault();
if (step = "login") {
//заносим информацию инпута в переменную
var login = $('.login-input').val();
//здесь начинается гора мусорного скрипта который создаёт анимации,
//переписывает элементы, который нужно каким-то образом заменить
//hidefast_anim - класс для прятанья элемента
//showfast_anim - соответственно для появления
$('.login-button').addClass('hidefast_anim');
setTimeout(function() {
$('.login-input').css('display', 'none');
}, 100);
setTimeout(function() {
$('#login-button').html('<div class="login-button-loading showfast_anim"><div class="login-button-loading-icon"></div></div>');
}, 100);
$.get("http://192.168.1.1/api?r=checklogin&login=" + login, function(data) {
if (data == "0") {
//если логин неправильный
$('.login-input').css('display', 'block');
$('#login-button').html('<div class="login-button-fail showfast_anim">Неверный логин</div>')
setTimeout(function() {
$('#login-button').addClass('hidefast_anim');
setTimeout(function() {
$('#login-button').html('<button class="login-button" type="submit">Далее</button>');
}, 100);
setTimeout(function() {
$('.login-button').removeClass('hidefast_anim');
$('#login-button').css('opacity', '1');
}, 100);
}, 2000);
} else {
//логин правильный
$id = data;
$('#loginheader').addClass('hidefast_anim');
setTimeout(function() {
$('#loginheader').html('Привет, ' + login + '!');
}, 100);
setTimeout(function() {
$('#loginheader').removeClass('hidefast_anim');
$('#loginheader').addClass('showfast_anim');
}, 300);
$('.login-inputtext').addClass('hidefast_anim');
setTimeout(function() {
$('.login-inputtext').html('Пароль');
}, 100);
setTimeout(function() {
$('.login-inputtext').removeClass('hidefast_anim');
$('.login-inputtext').addClass('showfast_anim');
}, 300);
$('.login-input').addClass('showfast_anim');
$('.login-input').css('display', 'block');
$('.login-input').val('');
$('.login-input').attr('placeholder', 'Введи сюда пароль');
$('#login-button').html('<button class="login-button" type="submit">Войти</button>');
setTimeout(function() {
$('.login-button').removeClass('hidefast_anim');
$('#login-button').css('opacity', '1');
}, 100);
step = "password";
}});
}
});
Ответы такие как "Посмотри в каком то учебнике" или "Вы написали полный бред" можете даже и не писать. Отвечу только на вопросы которые касаются моего вопроса, уточню если что то не понятно.