同时将屏幕和其他div移出屏幕

Question

我正在构建移动Web应用程序（APK未链接），并且我知道如何编译。 但我想给它一个真正的应用程序的感觉（效果）。

我有这个至今：

有没有一种方法，使左边，而另一个DIV幻灯片有权在其位置上填写当我点击的类别是整个DIV幻灯片？我正在寻找一些简单的代码来做到这一点，但我会采取任何行动。

谢谢！

Answer 1

基于我的评论这里是一些基本的代码，让你开始。

$('.button').click(function() { 
 
    if ($(this).hasClass('button-right')) { 
 
    $('.block1').css('marginLeft', '-100%') 
 
    } else { // hasClass button-left 
 
    $('.block1').css('marginLeft', '0%') 
 
    } 
 
})

html, body { 
 
    height: 100vh; 
 
    margin: 0; padding: 0; 
 
    background-color: green; 
 
} 
 
div { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.blocks { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 1; 
 
    min-width: 100%; 
 
    transition: all 0.3s ease; 
 
} 
 
.block1 { 
 
    margin-left: 0; 
 
    background-color: red; 
 
} 
 
.block2 { 
 
    background-color: yellow; 
 
} 
 
.button { 
 
    position: absolute; 
 
    top: 50%; transform: translateY(-50%); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 30px; height: 30px; 
 
    border-radius: 100%; 
 
    color: white; 
 
    background-color: black; 
 
    font-variant: small-caps; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
.button:hover {background-color: green;} 
 
.button-left { left: 10px; } 
 
.button-right { right: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="blocks block1">div one (left)</div> 
 
    <div class="blocks block2">div two (right)</div> 
 
    <div class="button button-left">l</div> 
 
    <div class="button button-right">r</div> 
 
</div>

小提琴

https://jsfiddle.net/Hastig/kfbwxye8/