WebKit скользить и выдвигать страницу

Question

Я новичок в анимации webkit и пытаюсь сделать такую ​​анимацию http://demo.jeffrey -way.com / tutsMobile / # site.php? SiteName = psdtuts Если вы нажметеЭлемент списка вы увидите, как страница скользит и выдвигается.

Я хочу внедрить эту анимацию в свое приложение, созданное с помощью backbone.js, underscore.js, zepto.js. Я мог бы использовать jqTouch или jquery mobile, но я бы хотел сделать его максимально легким,потому что я строю это только для IOS.Так что я не хочу реализовывать это самостоятельно.

Любые советы, чтобы сделать эту реализацию, или я должен пойти с jqTouch?

Answer 1

Я нашел один хороший пример http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application

Answer 2

В этом примере есть какая-то (я не хочу быть расплывчатым ...) система загрузки контента на основе ajax. Взгляните на источник:

<div data-role="page" id="article.php?siteName=psdtuts&amp;origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">

При первом посещении этого div не существует. Он создается javascript, когда требуется контент, затем заполняется этим контентом, а затем переводится (анимируется) в область просмотра.

Вот шаг за шагом, выведенный из быстрого взгляда на страницу:

1. Загружена базовая страница, включая css, javascript, список навигации
2. Скрипт ожидает нажатия элемента навигации.
3. После щелчка делается ajax-запрос к контенту, соответствующему выбранному элементу; определяется href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081". Моя догадка? Этот ajax-запрос получает содержимое из того же места, что и psdtuts.com, вероятно, в базе данных.
4. Пока загружается этот материал, javascript показывает анимацию загрузки. Когда загрузка завершена, она снова скрыта.
5. После создания нового заполненного содержимым элемента div ему присваивается позиция по умолчанию с левым краем, расположенным справа за правым краем экрана. После события позиционирования javascript затем определяет размеры представления и транслирует div через горизонтальное измерение. В то же время список навигации перемещается в том же направлении и на расстоянии.
6. При нажатии кнопки «Назад» размеры представления снова определяются (в случае изменения размера окна), а навигация и содержимое переводятся вправо, скрывая содержимое и снова показывая навигацию.
7. Повторите

Я мог бы не знать, как делается этот точный образец, но ... Ну, это сработает.

Вы бы не были , что сумасшедшими, чтобы использовать фреймворк для чего-то подобного, но я могу понять, что хочу выполнить пользовательскую работу. Это, безусловно, будет быстрее для пользователей, но медленнее для вас. В зависимости от ваших намерений это будет просто замечательно.

edit: если вы даете это только пользователям с помощью webkit, использование фреймворка становится даже менее необходимым ... Если вы не беспокоитесь о кросс-браузерной поддержке, здесь действительно не так много всего, что вы не могли бы Это легко сделать с помощью необработанного JavaScript.

Единственная причина, по которой я, например, чаще всего использую jQuery, заключается в том, чтобы в большинстве случаев все работало нормально. Это просто сглаживает так много вещей ... Даже если 95% фреймворка не используется, оно того стоит, когда у вас есть крайний срок.