Как организовать смену страниц с эффектом как в примере?

Question

[gassmonkey]

Есть пример - goo.gl/L3yV4U
При клике на next project -> страница одного проекта меняется на страницу другого, с эффектом как у слайдера.
Мне необходимо организовать то же самое, но для всех страниц сайта (причуда заказчика). Т.е. при клике на пункт меню, контент текущей страницы уезжает влево, а справа выезжает контент выбранной в меню страницы.
Очевидно, что "в лоб" это решается через ajax и history api. Но как это грамотно реализовать с учётом эффектов пока не совсем понимаю. И как решить проблему задержек из-за загрузки контента? Подгружать предварительно не вариант, это шоп с довольно большим количеством товаров.

Answer 1

[Денис Инешин]

Не всё так просто.
Чтобы организовать сайт как одностраничное приложение воспользуйтесь например Ember.js.

Далее, чтобы сделать плавные переходы между состояниями воспользуйтесь специальным плагином для эмбера: Ember Animated Outlet. Пример работы: ember-animated-outlet-demo.herokuapp.com

Или вариант в лоб: onbeforeunload - стартуете анимацию убирания текущего контента. Далее, новые страницы грузятся с невидимым контентом и на onLoad всей страницы - вешаем анимацию его появления. Имхо эффект будет похожим на ожидаемый. Аякс не нужен.

Comments

[gassmonkey]

А какие проблемы могут возникнуть при решении "в лоб", описанном выше? Дело в том, что вёрстка уже готова, а хотелка у заказчика появилась в последний момент. Бюджет на неё выделен неплохой, но для переработки на Ember, Backbone и иже с ними всё же недостаточный.

[Денис Инешин]

gassmonkey: ну тогда другой вариант: onbeforeunload - стартуете анимацию убирания текущего контента. Далее, новые страницы грузятся с невидимым контентом и на onLoad всей страницы - вешаем анимацию его появления. Имхо эффект будет похожим на ожидаемый. Аякс не нужен.

[gassmonkey]

Денис Инешин: А что скажете на счёт Angular UI-Router?

[Денис Инешин]

gassmonkey: Ангуляр это большой фреймворк, как и Эмбер. Трудозатраты по внедрению примерно одинаковые.

[gassmonkey]

Денис Инешин: С ангуляром я поверхностно знаком, по крайней мере построить на нём роутинг будет не сложно. Однако встаёт вопрос с индексацией сайта поисковиками.

[Денис Инешин]

gassmonkey: ангуляр вам в этом никак не поможет. Его нельзя запускать на сервере для пререндеринга.

[gassmonkey]

Денис Инешин: Это понятно. Я о том, что при использовании ангуляр или эмбер, нужен будет будет механизм отдачи роботам сгенерированных ещё на сервере страниц.

[Денис Инешин]

На сколько я знаю, эмбер позволяет делать пререндер на сервере, ангуляр нет.

[gassmonkey]

Денис Инешин: Да, но работает это только на RoR или Node. А это мне не совсем подходит.

[Денис Инешин]

gassmonkey: ну я вам предложил вариант решения в лоб) А так по сути вы от ноды не уйдете, ибо суть изоморфных фреймворков как раз в том, чтобы один и тот же код работал на клиенте и сервере. Если интересуют еще варианты то взгляните на React.js + Flummox

[gassmonkey]

Денис Инешин: Спасибо за советы. Заказчик адекватный, согласился на увеличение бюджета. Так что - здравствуй, Эмбер!

Answer 2

[Владимир]

goratchet.com/components на странице найдите Push.js
Похоже это, то что Вам надо. А вообще это css переходы + ajax с заменой блоков - но только для css 3.