Знатоки HTML5 History API - Сюда!

И закрыть сразу шлак этот поганый.

 

Хе, хе) Ну для понятия структуру неплохо, а уже потом стоило бы глянуть в сторону React, Backbone и т.д. Но не jQuery, это слишком прост и бесполезно в 2к17 для разработок, почему никто не хочет писать чистый и красивый код?

 

Бэкбон старый. Сейчас нужно смотреть в сторону react и vue. За ними будующее.
Никто не хочет писать классный код потому, что это сложно. Архитектура, доки, тесты - все это чуждо местным "разработчикам".

 

Ну да... это печально... Ну каждый с чего начинал, а начал с того время когда был JS ещё тьмой густой, HTML не 5 и CSS не 3... Хотя это уже относится непосредственно к фронтеду, меня больше бэкенд манит. Современный стак просто прекрасен!

 

Как действующий фуллстек могу тебе сказать, что современный бэкенд скучен до чертиков) на той же ноде есть решения под всевозможные требования. Бери и юзай. Про пыху я вообще молчу)

 

Это так, но я и сам постоянно выкладываюсь в это сообщество что всё было лучше)
Тут уж скорее нужно научится правильно выбирать.
Всё же Node JS + ES(6, 7) некое спасения синтаксическим сахаром)

 

Дай линк на гитхаб)

 

github.com/negezor

 

Вот щас, когда уже вся логика кода готова, можно переделывать все на чистом js.

Кстати, как думаете не трудно ли будет переписать весь код на чистый js, ибо мне будет трудно и долго разбираться как все переделывать в чистый Javascript. Вот код:

Код:

$('document').ready(function(){
$('.historyAPI').on('click', function(e){     
e.preventDefault();
var href = $(this).attr('href');
ajax('get', href, null, false);
    });
});

$("body").on("click", '#register', function() {
$(".auth").slideUp();
$(".register").slideDown();
$("#form").html("Регистрация");
});
$("body").on("click", '#auth', function() {
$(".auth").slideDown();
$(".register").slideUp();
$("#form").html("Авторизация");
});
$("body").on("click", '.list a, #ajax', function() {
href = $(this).attr("href");
ajax('get',href, null, true);
return false;
});
$("body").on("submit", 'form', function() {
action = $(this).attr("action");
ajax('post',action,this,false);
return false;
});
function ajax(type,href,id,historyUpdate)
{
$("a,input[type='submit'],button").attr("disabled", "disabled");
if (type == "get")
{
$.ajax({
type: 'GET',
url: href,
success: function(data){
dataTitle = $(data).filter("title").html();
dataContent = $(data).filter(".content").html();
dataSidebar = $(data).filter(".sidebar").html();
$('.content').html(dataContent);
$(".sidebar").html(dataSidebar);
document.title = dataTitle;
if (historyUpdate)
{
history.pushState(null, null, href);
}
$("[disabled='disabled']").removeAttr("disabled");
}
});
}
if (type == "post")
{
$.ajax({
url: href,
type: 'POST',
data: $(id).serialize(),
dataType: 'json',
success: function(json) {
if (json.message == "<p>Вход выполнен успешно!</p>" || json.message == "<p>Успешная регистрация!</p>")
{
ajax("get",location.pathname);
}
$('.message').html(json.message);
$('.message').slideDown().delay(5000).slideUp();
$("[disabled='disabled']").removeAttr("disabled");
}
});
}
}
window.addEventListener('popstate', function(event) {
ajax('get', location.pathname);
}, false);
function quit()
{
$.cookie('login', null, { path: '/' });
$.cookie('password', null, { path: '/' });
ajax('get','/');
}

Нашел интересный сайтик, но инфы на нем мало.
http://youmightnotneedjquery.com/

 

Этот кусок кода можно переписать за пол часа.

Кроме вот этого кала. Его бы я вообще выкинул.

 

Согласен, такое нужно на CSS делать, во первых оптимизация, а во вторых рендер на GPU

 

И работать будет в 60fps на всех девайсах.

 

А разве можно сделать анимацию плавно выезда блока?
Пробовал менять height с помощью transition - плавно объект не менял высоту...

 

Конечно. Почитай про CSS анимации более подробно.

 

Прочитал. Похоже, что мой вариант:
-webkit-transform:translate(0,0); (когда надо показать блок)
-webkit-transform:translate(0,100%); (когда надо скрыть)

Это работает, а можно ли тогда на css задержать показ блока на 5 сек через css?
Или тут уже javascript только?

 

Keyframes

 

Как уже и сказал @Cames, достичь этого эффекта можно через keyframes, освоить их очень легко.
Но если ты не хочешь ничего делать, используй Animate.css

 

Уже сделал.