最佳答案
在标准页面上重新创建jQuery Mobile的翻转过渡非常简单.首先创建一个绝对定位的容器,其中包含两个相对定位的子容器,这两个容器将是您在两个页面之间翻转的页面.加载两个页面后,将“翻转”和“输出”类应用于要替换的页面,并在其上调用hide().最后,将“flip”和“in”类添加到正在显示的页面,并在其上调用show().
转换只是CSS3转换,所以请注意它们不适用于所有浏览器,并且它们在大屏幕/低性能机器上可能表现不佳.
HTML
CSS
.container {
position: absolute;
-webkit-perspective: 1000;
-moz-perspective: 1000;
}
.page1 {
width: 300px;
height: 300px;
background: red;
position: relative;
}
.page2 {
width: 300px;
height: 300px;
background: blue;
position: relative;
display: none;
}
.flip {
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0);
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-moz-animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
-moz-animation-name: flipintoright;
-moz-animation-duration: 225ms;
}
.flip.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
JavaScript的
您需要使用与您的页面更相关的内容替换此部分,但概念将是相同的.
$('#go').click(function() {
var page1 = $('.page1');
var page2 = $('.page2');
var toHide = page1.is(':visible') ? page1 : page2 ;
var toShow = page2.is(':visible') ? page1 : page2 ;
toHide.removeClass('flip in').addClass('flip out').hide();
toShow.removeClass('flip out').addClass('flip in').show();
});
这是一个有效的演示：http://jsfiddle.net/lakario/VPjX9/
