jquery - Mobile Jquery - 翻转效果

Question

请在下面找到 URL。

http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

如何在页面加载或 document.onReady 上使用这些效果？

Answer 1

在标准页面上从 jQuery Mobile 重新创建翻转转换非常简单。首先创建一个绝对定位的容器，其中包含两个相对定位的子级，这将是您在其中翻动的两个页面。加载两个页面后，将“翻转”和“输出”类应用于要替换的页面，并对其调用 hide()。最后，将 'flip' 和 'in' 类添加到正在显示的页面并对其调用 show()。

转换只是 CSS3 转换，所以请注意它们不会在所有浏览器上工作，并且它们在大屏幕/低性能机器上可能表现不佳。

HTML

<button type="button" id="go">FLIP</button>
<div class="container">
    <div class="page1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="page2">
        Duis interdum, odio vel condimentum varius, nibh nunc ultrices velit.
    </div>
</div>

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/