Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none.
page1 = $('.page1');
page2 = $('.page2');
page1.removeClass('animate').css('display', 'block').css('transform','translate3d(0,0,0)');
page2.removeClass('animate').css('display', 'none').css('transform','translate3d(0,0,0)');
Next step involves moving page2 to the right without animation and displaying it.
page2.removeClass('animate')
.css('display', 'block')
.css('transform','translate3d(100px,0,0)');
Following that, an animation on page1 triggers a translation effect.
page2
.addClass('animate')
.css('transform','translate3d(0px,0,0)');
A notable issue arises when performing both animations back-to-back, resulting in no animation. However, inserting a brief pause between the two animations resolves this problem.