Question

请找到以下网址。

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

如何在页面onload或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/

移动Jquery - 翻转效果

1 个答案: