移动jQuery - 翻转效果

Question

请查看下方的URL链接。 http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html 如何在页面加载时或文档就绪时使用这些效果？

- Raghavak

---

你正在使用jQuery Mobile吗？如果没有，你是否在使用AJAX页面加载？这些转换之所以在jQuery Mobile上起作用，是因为所有页面加载都是部分加载。如果你正在加载整个页面，转换效果将不会非常流畅，因为它只有在页面完全加载后才会运行。 - Nathan Taylor

谢谢你的回复，Nathan。是的，我正在使用Ajax（使用“load”函数在div标签中加载外部HTML页面）。 - Raghavak

你想模拟这些效果中的哪一个？它们每一个都会不同。 - Nathan Taylor

我正在尝试使用Nathan的翻转效果。 - Raghavak

可能是HTML5-翻页效果的重复问题。 - gen_Eric

Answer 1

在普通页面上重新创建jQuery Mobile中的翻转过渡效果相当简单。首先创建一个绝对定位的容器，其中包含两个相对定位的子元素，它们将是你要翻转的两个页面。一旦两个页面都加载完毕，将“flip”和“out”类应用于被替换的页面，并在其上调用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/

- Nathan Taylor