移动Jquery - 翻转效果 [英] Mobile Jquery - Flip Effect

问题描述

请找到以下网址。

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

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

How can I use these effects on page onload or on document.onReady??

推荐答案

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

Recreating the flip transition from jQuery Mobile on a standard page is fairly straightforward. Start by creating an absolutely positioned container with two relatively positioned children which will be the two pages you are flipping between. Once you have both pages loaded, apply the 'flip' and 'out' classes to the page being replaced and call hide() on it. Finally, add the 'flip' and 'in' classes to the page being displayed and call show() on it.

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

The transitions are just CSS3 transforms so just be mindful that they won't work on all browsers and they may behave poorly on large screens/low performance machines.

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

您需要使用与您的页面更相关的内容替换此部分，但概念将相同。

You'll need to replace this part with something more relevant to your page, but the concept will be the same.

$('#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/

Here is a working demo: http://jsfiddle.net/lakario/VPjX9/

这篇关于移动Jquery - 翻转效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！