I am working on creating a dynamic sliding animation that transitions between two different divs. Here is the current progress of my code:
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);
// swap the values of current and other 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;
}
/* define slide to the left in animation */
@keyframes slideLeftIn {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0%);
}
}
/* define slide to the left out animation */
@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>There are two issues I am currently trying to address:
When I click and
currentis set as$('#red'), it switches to blue before animating. However, ifcurrentis assigned as$('blue'), the animation functions correctly.Is there a way to eliminate the blank space between the sliding divs? I attempted to move the
outside of the event handler, but this caused the animation to not play at all.$elem_in.css('animation', 'slideLeftIn 1s ease');
I have come across similar questions like this one. However, the solutions provided involve absolute positioning, whereas I am aiming to achieve my desired animation using CSS transitions instead.