没有 jQuery Mobile 库的 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 库的 jQuery Mobile CSS3 页面转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！