css3 and jquery load page slider effect

问题

Hi I´m trying to create a full page load slider effect with css3 and jquery. For this I´m using two divs where I load the pages. I have buttons for previous, close and next. I´m having problem with next effect. When I click the next button I load the new page into div 2 at the moment with translateX ('100%'). Then I add translateX ('-100%') to div1(at the moment on screen translateX ('0%')). The effect should be translateX ('-100%') div1, and then translateX('0%') for div2. All translates with a transition of 1.0s.

This is working.

But when I click again the next button the div1 is with translateX('-100%'), (on left, out of screen), so I remove the class with translateX ('-100%') and add another class with translateX('100%') with out transition. Then I remove this class and add another class with translateX('0%') with transition of 1.0s. I remove class with translateX ('0%') for div2 and add another with translateX ('-100%') to movet to the left. But this is not working. The div1 is entering by the left instead of the right of the screen. Any Idea?

the CSS

.to-next {
    transform: translateX(100%); 
}

.to-screen {
    transform: translateX(0%);
    transition-duration: 1.0s;
}

.to-left {
    transform: translateX(-100%); 
    transition-duration: 1.0s;
}

The HTML

<div id="ajax-inserted1" class="to-right"></div>
<div id="ajax-inserted2" class="to-right"></div>

The JavaScript

$('#ajax-inserted2').removeClass('to-screen').addClass('to-left');     
$('#ajax-inserted1').removeClass('to-left').addClass('to-next').removeClass('to-next').addClass('to-screen');

回答1:

This is most likely happening because you are not giving the browser time to update between adding the translateX(100%) and then changing it to translateX(0%). This causes it to only run the translateX(0%) with animation (causing it to come from the left). If you instead move the translateX(0%) to a setTimeout of 0, it should work correctly because it gives the browser time to refresh the CSS. (Note there are better ways instead of setTimeout but it will work to test it)

setTimeout(function() {
    $('#ajax-inserted1').removeClass('to-next').addClass('to-screen');
    $('#ajax-inserted2').removeClass('to-screen').addClass('to-left');
}, 100);

jsFiddle here

来源：https://stackoverflow.com/questions/27538279/css3-and-jquery-load-page-slider-effect

标签

jquery

css3

animation

transition

effect