PhoneGap - 如何在没有JQuery mobile的情况下添加页面过渡效果？

Question

我使用简单的window.location从一个页面导航到另一个页面。

如何使用window.location导航带有幻灯片效果的页面？

（尝试使用JQuery移动，但它增加了大量的页面大小和ui在应用程序中令人不安。）

你能就此提出建议吗？

先感谢您。

Answer 1

只使用jquery，并在document.ready函数中使用jquery库中的效果。

例如：

$(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
});

如果你在页面上给出这个，页面将加载非常慢，这只是使用jquery库而没有其他插件。

对于重定向：

$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(1000, redirectPage(linkLocation));     
});

function redirectPage(link) {
    window.location = link;
}

希望你明白这个主意。

您可以在http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/上查看完整详细的说明。

快速示例： http ： //www.onextrapixel.com/examples/jquery-page-transitions/index.php

Answer 2

如果您正在寻找滑动效果，请查看CSS3。 它易于使用转换调用，允许您使用非常少的代码滑动视图。 例如：

 //css
 .firstpage{
 height:100%;
 width:100%;
 transition: all 2s;
}
 .movefirstpage{
 left:100%;
 }

 //js
 $(".firstpage").addClass(".movefirstpage");

基本上这样做是将第一页滑到屏幕左边。 您可以使用相同的逻辑将新页面滑动到屏幕上。

另请查看此链接： http ： //coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/