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

在這個例子中，有一些（我討厭是模糊的......）基於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. 重複

我可以從如何精確樣本正在做被關閉，但是......唉，這會工作。

你不會那瘋狂地使用這樣的框架，但我可以理解想做一個自定義的工作。用戶肯定會更快，但對你來說會更慢。根據你的意圖，這將會很好。

編輯：如果您只向webkit用戶提供此服務，那麼使用框架就更不必要了......如果您不擔心跨瀏覽器支持，那麼這裏確實沒有太多的事情發生，用原始的javascript很容易完成。

我大多數時候使用jQuery的唯一原因是爲了確保在大多數使用情況下工作正常。它只是平滑了很多東西......即使95％的框架沒有被利用，但是在你有最後期限的時候它是值得的。

Answer 2

我創辦了一個很好的例子，你的答案 http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application