I would like to implement a feature where a div can slide in from either side of the page, eventually creating a carousel-like application. When a user clicks the "forward" or "backward" button, I want to slide out any active divs, create a new div, assign it the classes "left" or "right" to determine its starting position, and then add the transition class "active" so it smoothly moves into place.
$("#forward").click(function(){
$(".active").removeClass("active left right").addClass("toRight").bind(transitionendstr, function(){
$(this).remove();
});
data = "new data here";
target = $(slidepartial).clone().addClass("left");
$("#content").append(target);
$(target).addClass("active");
});
The CSS for this setup is as follows:
.active{
left:50% !important;
transition:left 2s;
-moz-transition: left 2s; /* Firefox 4 */
-webkit-transition: left 2s; /* Safari and Chrome */
-o-transition: left 2s; /* Opera */
}
.left{
left:-100%;
}
.right{
left:100%;
}
.toRight{
left:100%;
transition:left 2s;
-moz-transition: left 2s; /* Firefox 4 */
-webkit-transition: left 2s; /* Safari and Chrome */
-o-transition: left 2s; /* Opera */
}
.toLeft{
left:-100%;
transition:left 2s;
-moz-transition: left 2s; /* Firefox 4 */
-webkit-transition: left 2s; /* Safari and Chrome */
-o-transition: left 2s; /* Opera */
}
However, I am facing an issue where the newly created div doesn't apply the "left" or "right" css properties before transitioning to the center. How can I ensure that the positioning changes take effect before applying the active css?