没有jQuery Mobile Library的jQuery Mobile CSS3页面转换 [英] jQuery Mobile CSS3 Page Transitions without jQuery Mobile Library

问题描述

我有一个使用HTML / JS（jQuery）/ CSS创建的移动应用程序，我想包括页面转换，模仿那些发现在jQuery Mobile（特定的翻转过渡），而不需要包括整个jQuery Mobile框架。

I have a mobile app created using HTML/JS(jQuery)/CSS and I'm looking to include page transitions that mimic those found in jQuery Mobile (in specific the flip transition) without the need to include the whole jQuery Mobile Framework.

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

These animations appear to be CSS3 transitions tied to jQuery triggers but I have no idea where to start. Does anyone have any ideas?

任何帮助将非常感激。

推荐答案

下载jQuery Mobile的CSS文件的非缩略版本，并复制出您想要的特定转换的类。

Download the non-minified version of the CSS file for jQuery Mobile and copy out the classes for the specific transitions you want.

CSS可以在这里找到： http://code.jquery.com/mobile/1.0rc2/ jquery.mobile-1.0rc2.css

The CSS can be found here: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

转换的代码从第1270行开始。如果你为所有的CSS类转换过来，它只有大约6KB的信息。

And the code for transitions starts at line 1270. If you copy-out all of the CSS classes for transitions, it's only about 6KB of info.

这里是一些示例代码从上面的CSS文件：

Here is some example code from the above CSS file:

.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 类。

So to flip-in an element you would add the .flip class and the .in class, and to flip-out an element you would add the .flip class and the .out class.

此外，jQuery CSS只包括 -webkit - 前缀，但如果您想支持更多浏览器，您可以添加其他前缀，例如： -moz - ， -o - 等。

Also the jQuery CSS only includes -webkit- prefixes but if you want to support more browsers you can add other prefixes like: -moz-, -o-, etc.

这篇关于没有jQuery Mobile Library的jQuery Mobile CSS3页面转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！