divと画面のdivを同時に画面にスライドさせて

Question

私はモバイルウェブアプリケーションをビルドしています（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/