沒有jQuery Mobile Library的jQuery Mobile CSS3頁面轉換

我有一個使用HTML/JS（jQuery）/ CSS創建的移動應用程序，我正在尋找包含模仿jQuery Mobile中找到的頁面轉換（在特定的翻轉過程中）而無需包含整個jQuery Mobile Framework。沒有jQuery Mobile Library的jQuery Mobile CSS3頁面轉換

這些動畫似乎是綁定到jQuery觸發器的CSS3轉換，但我不知道從哪裏開始。有沒有人有任何想法？

任何幫助將不勝感激！

來源

2011-10-27 dSquared

你可以看看只是頁面轉換庫，因爲我知道jQM是從Beta RC2的解耦小部件：http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/看看這個：https：//github.com/jquery/jquery-mobile/tree/master/js –

@PhillPafford謝謝;那很完美。 – dSquared

下載jQuery Mobile的CSS文件的未縮小版本，併爲您想要的特定轉場複製類。

的CSS可以在這裏找到：http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

而對於轉換代碼開始於行1270如果你複製了所有的CSS類來進行轉換，這只是關於信息的6KB。

這裏是從上面的CSS文件中的一些示例代碼：

.viewport-flip { 
    -webkit-perspective: 1000; 
    position: absolute; 
} 

.ui-mobile-viewport-transitioning, 
.ui-mobile-viewport-transitioning .ui-page { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

.flip { 
    -webkit-animation-duration: .65s; 
    -webkit-backface-visibility:hidden; 
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ 
} 

.flip.out { 
    -webkit-transform: rotateY(-180deg) scale(.8); 
    -webkit-animation-name: flipouttoleft; 
} 

.flip.in { 
    -webkit-transform: rotateY(0) scale(1); 
    -webkit-animation-name: flipinfromleft; 
}

因此倒裝中的元素將添加.flip類和.in類，並翻轉式都將添加一個元素.flip類和.out類。

而且jQuery的CSS僅包括-webkit-前綴，但如果你想支持更多的瀏覽器，你可以添加其他前綴，如：-moz-，-o-等

來源

2011-10-27 18:48:29 Jasper

完美;我正在考慮接下來的嘗試，看起來像它的路要走。謝謝！ – dSquared

Check-out Phill對你的問題的評論，如果你看看那個GIT倉庫中的文件，你會遇到這個：https：//github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile .transition.js。這是小於2KB，並處理添加/刪除必要的CSS到你正在動畫的元素。 – Jasper

更好;再次感謝你。 – dSquared