javascript - 类似 ios 的动画，可将内容从右向左滑动

Question

我正在尝试模拟我在许多 iPhone 应用程序中看到的效果。单击按钮时，它实质上是将屏幕上的内容从右向左滑动。原始屏幕的内容从左侧滑出 View ，下一屏幕的内容从右侧向中间滑入 View 。

我已经能够使用 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 Example

Answer 1

我没有发现您目前所做的有任何问题。您可以做的一项改进是在切换屏幕时只为一个元素设置动画。例如，给 #screen1 z-index: 1 和 #screen2 z-index: 2。然后你可以删除动画 #screen1 的行，因为另一个屏幕将出现在它上面。 jsFiddle example

如果您有多个屏幕，您可以使用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%'});