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

我试图模仿在许多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 Example

解决方法:

我看不到您目前正在做什么.您可以做的一项改进就是在切换屏幕时仅对一个元素进行动画处理.例如,给#screen1 z-index：1和#screen2 z-index：2.然后您可以删除为#screen1设置动画的行,因为另一个屏幕将出现在它上面. jsFiddle example

如果有多个屏幕,则可以从z-index：0开始所有屏幕.如果要在顶部显示一个屏幕,请先为其指定z-index：1,然后执行动画以将其放在另一个屏幕之上屏幕.在另一个屏幕上再次执行此操作时,您可以执行相同的操作并在动画之前切换z索引.您还需要适当设置宽度.最后,您的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%'});

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！