After extensive research and modifications, here is the current state: view demo
.cube {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
display: inline;
}
.container1 {
display: inline;
}
.container2 {
display: inline;
}
.animate-enter,
.animate-leave {
-webkit-transition: 1s all ;
-moz-transition: 1s all ;
-o-transition: 1s all ;
transition: 1s all ;
position: relative;
}
.animate-enter {
left: 100%;
}
.animate-enter.animate-enter-active {
left: 0;
}
.animate-leave {
left: 0;
display: inline;
}
.animate-leave.animate-leave-active {
left: -100%;
}
1. Despite my efforts, there is still an issue where the two divs are not aligned properly. Applying "display:inline" to the .cube and .container classes didn't resolve it. I aim to have page2 appear adjacent to page1 with synchronized sliding, similar to mobile swipe transitions, without grouping them as a single block like traditional banners.
2. Currently, I've only implemented leftward slide animations for entering and leaving. How can I introduce additional sliding animations within the .cube element? For instance, having Page1 exit to the left while Page2 enters from the right. Moreover, I'd like to incorporate a button that triggers Page3 to exit to the right and Page1 to enter from the right. How can this be achieved?
Thank you.