Schieben Sie zwei Divs gleichzeitig mit CSS-Animationen

Question

Mein Ziel ist es, eine gleitende Animationen zu machen, um zwischen zwei Divs zu wechseln. Hier ist, was ich bisher:

var current = $('#blue'); 
 
var other = $('#red'); 
 

 
function slider($elem_in, $elem_out) { 
 
    $elem_in.show(); 
 
    // reset the animations 
 
    $elem_in.css('animation', ''); 
 
    $elem_out.css('animation', ''); 
 
    // remove the previous event handler 
 
    $elem_in.off('animationend'); 
 
    // make the elem_out slide out 
 
    $elem_out.css('animation', 'slideLeftOut 1s ease'); 
 
    $elem_out.on('animationend', function() { 
 
    $elem_in.css('animation', 'slideLeftIn 1s ease'); 
 
    $elem_out.hide(); 
 
    }); 
 
} 
 

 
$('#container').on('click', function() { 
 
    slider(other, current); 
 
    // invert the two variables 
 
    other = [current, current = other][0]; 
 
})

#container { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    border: 1px solid black; 
 
} 
 

 
#container div { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#red { 
 
    background: red; 
 
} 
 

 
#blue { 
 
    background: blue; 
 
} 
 

 

 
/* slide to the left in */ 
 

 
@keyframes slideLeftIn { 
 
    0% { 
 
    transform: translateX(150%); 
 
    } 
 
    100% { 
 
    transform: translateX(0%); 
 
    } 
 
} 
 

 

 
/* slide to the left out */ 
 

 
@keyframes slideLeftOut { 
 
    0% { 
 
    transform: translateX(0%); 
 
    } 
 
    100% { 
 
    transform: translateX(-150%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
</div>

Es gibt zwei Probleme mit diesem, das ich versuche zu lösen:

1. Wenn ich auf und current ist $('#red'), Es wird blau, bevor die Animation abgespielt wird. Wenn current jedoch $('blue') ist, funktioniert die Animation einwandfrei.

2. Ist es möglich, nicht den Leerraum zwischen den divs zu haben, wenn sie gleiten? Ich habe versucht, die $elem_in.css('animation', 'slideLeftIn 1s ease'); outisde des Ereignishandlers zu bewegen, aber in diesem Fall die Animation überhaupt nicht spielen.

---

Ich habe die ähnlichen Fragen wie this one gesehen, aber die Antwort verwendet absolute Positionierung und ich möchte stattdessen mein Ziel mit CSS-Übergängen erreichen.

Answer 1

Problem 1 hängt davon ab, wo das Element platziert ist. Nachdem das zweite Element verschoben wurde, gibt es nichts nach rechts, um nach links zu rutschen. Nehmen Sie einfach das erste animierte Div und fügen Sie es am Ende an.

$elem_out.hide().remove().appendTo("#container");

Auch dann würden Sie die Schaltlogik nicht benötigen. Verweisen Sie einfach auf die 2 Elemente im Aufruf des Sliders(). Etwas wie:

$('#container').on('click', function() { 
    slider($(this).children().eq(1),$(this).children().eq(0)) 
}) 

https://jsfiddle.net/0xak4aes/

Was Problem 2 kann ich Ihnen zu diesem Zeitpunkt nicht helfen.

Answer 2

Da ich neugierig war, habe ich eine Version mit einer Hülle und einem Container mit 2 Elementen erstellt, die darin schweben und den Container statt der einzelnen Elemente animieren.

function slider(container) { 
    container.css('animation', 'slideLeft 1s ease') 
    .on('animationend', function() { 
     console.log("swap!"); 
     container.off('animationend') // remove handler 
     .css('animation', '') // reset css 
     .children().eq(0).remove().appendTo(container); // swap 
    }); 
} 

$('#container').on('click', function() { 
    slider($(this)); 
}) 

https://jsfiddle.net/ofc4w7dy/

meine css + Kommentare prüfen. Fühlen Sie sich frei, die Elemente separat zu animieren.