类iOS动画的内容从右向左滑动

Question

我想模仿我在许多 iPhone 应用程序中看到的效果。当单击按钮时，它基本上会将屏幕上的内容从右向左滑动。原始屏幕的内容向左滑动消失，并且下一个屏幕的内容从右侧滑入屏幕中心。

我已经能够使用 jQuery 模拟这个效果。请参见 this fiddle。它可以正常工作，但是随着动画变得更加复杂（例如添加按钮以返回原始屏幕或存在两个以上的屏幕时），这种方法变得非常复杂和混乱。我相信有一种更有效的方法来实现这种效果，但我不知道如何做。有人可以给我一个提示吗？我已经搜索了网络，但我认为我没有使用正确的术语进行搜索，因为我什么也没找到。我的代码如下所示。

HTML：

<div id="screen1">
    <div id="header">Screen 1</div>
</div>

<div id="screen2">
    <div id="header">Screen 2</div>
</div>

<a href="#" id="button">Swipe</a>

CSS：

body, html {
    width: 100%;
    height: 100%;
}

#screen1 {
    background: blue;
    width: 100%;
    height: 100%;
    position: fixed;
}

#header {
    height: 50px;
    width: 100%;
    background: red;
}

#screen2 {
    background: green;
    width: 0px;
    height: 100%;
    position: fixed;
    right: 0;
}

jQuery：

$('#button').click(function(){
    $('#screen1').animate({width: '0px'});
    $('#screen2').animate({width: '100%'});
});

JS Fiddle示例

- JSW189

---

你的浏览器要求是什么？在Chrome中检查这个：http://jsfiddle.net/9C9yf/5/。如果你试图镜像iPhone，你的方法有点偏离——第二个屏幕应该始终具有正确的宽度和高度，但应该定位到屏幕外，并且在屏幕1滑出时滑入。 - skyline3000

Answer 1

我认为你目前做得很好，但你可以进行一些改进。例如，在切换屏幕时，只动画一个元素。比如，给#screen1 z-index: 1 和#screen2 z-index: 2。这样，你就可以删除动画#screen1的代码，因为另一个屏幕会出现在它上面。jsFiddle示例 如果你有多个屏幕，你可以把所有屏幕都设为z-index: 0。当你想让一个屏幕置于顶部时，先给它设置z-index: 1，然后再执行动画将其置于其他屏幕之上。当你再次使用另一个屏幕时，你可以在动画之前切换z-indexes。你也需要适当地设置宽度。最终，你的JS代码可能会像这样：

$targetScreen = getTargetScreen(); // somehow figure out which screen you're switching to
$prevTargetScreen = getPrevTargetScreen(); // this will also depend on your implementation

$prevTargetScreen.css('z-index', 0);
$targetScreen
    .css({ width: 0, `z-index`: 1 })
    .animate({width: '100%'});

- Zhihao

Answer 2

一个简单的处理多屏幕的方法是将所有屏幕保存在一个数组中，并记住当前所在的屏幕。

看一下这个代码片段：http://jsfiddle.net/9C9yf/4/ 我的第一个建议是不要对宽度进行动画处理（它会搞乱位置），而是对屏幕左侧位置进行动画处理（我将它们设置为absolute）。

然后，在加载时，每个屏幕都必须处于top:0; left:100%状态。

然后在DOM准备就绪时调用此代码：

var arrScreen = new Array();

$('.screen').each(function(){
   arrScreen.push($(this));
})

var currentScreen = 0;

arrScreen[currentScreen].css('left', '0%');

这将保存页面编号并显示第一页。

之后，您需要更改滑动操作。此代码目前仅适用于一侧，但我相信您会找到一种方法来使另一侧动画化：

$('.button').click(function(){
    if(currentScreen < arrScreen.length){
        currentScreen++;
        arrScreen[currentScreen].animate({'left' : '0%'});
    }
});

基本上，它检查我们是否不在最后一页，然后动画下一个元素的左侧位置。

请注意，如果您想转到上一页，则动画的“left”属性将为100％。

- Karl-André Gagnon