Slide div aus dem Bildschirm und andere div in Bildschirm zur gleichen Zeit

Ich baue eine mobile Web-App (APK nicht Link) und ich weiß, wie kompilieren. Aber ich möchte es ein echtes App-Feeling (Effekte) geben.Slide div aus dem Bildschirm und andere div in Bildschirm zur gleichen Zeit

Ich habe dies so weit:

Gibt es eine Möglichkeit, dass die ganze div Rutsche links zu machen, während ein anderer div Dias direkt an seinem Platz zu füllen, wenn ich eine Kategorie klicken? Ich suche nach einem einfachen Code, aber ich nehme alles.

Danke!

Quelle

2017-04-07 Watch Yo Jet

In diesem Fall würde ich jQuery Mobile vorschlagen, wie es Sie wollte alle Funktionen. http://demos.jquerymobile.com/1.4.5/transitions/ –

Sie können jede div 'min-width: 100%;' und die 'margin-left:' auf der ersten div. Wenn Sie also möchten, dass es herausgleitet, ändern Sie den ersten Div von 'margin-left: 0%;' zu 'margin-left: -100%;' Sie können 'display: flex;' auf dem Container/wrapper/parent verwenden sie werden also nicht übereinander gelegt, da flex standardmäßig "flex-direction: row;" und "flex-wrap: nowrap" ist. Andere Möglichkeiten, dies zu umgehen. –

Es wäre schön, wenn wir einen Code sehen könnten –

Basierend auf meinem Kommentar hier ist ein paar grundlegende Code, um loszulegen.

$('.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>

Geige

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

Quelle

2017-04-07 05:43:28

Slide div aus dem Bildschirm und andere div in Bildschirm zur gleichen Zeit

Antwort

Verwandte Themen