没有jQuery Mobile Library的jQuery Mobile CSS3页面转换

Question

我有一个使用HTML/JS（jQuery）/ CSS创建的移动应用程序，我正在寻找包含模仿jQuery Mobile中找到的页面转换（在特定的翻转过程中）而无需包含整个jQuery Mobile Framework。

这些动画似乎是绑定到jQuery触发器的CSS3转换，但我不知道从哪里开始。有没有人有任何想法？

任何帮助将不胜感激！

Answer 1

下载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-等

Answer 2

你可以看看刚刚页面转换库，因为我知道JQM是去耦部件以Beta版RC2的：

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released
• http://github.com/jquery/jquery-mobile/tree/master/js

Answer 3

通过fasw查看“非Jquery页面转换轻量级”。

演示这里：http://www.fasw.ws/demos/transitions1/slide1.html

和源位置：http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

这是JS生产是就像那些通过整个移动jQuery的库产生的过渡1.7K。