css3和jquery加载页面滑块效果 [英] css3 and jquery load page slider effect

问题描述

我想用css3和jquery创建一个整页加载滑块效果。为此，我使用两个div加载页面。我有上一个，关闭和下一个按钮。我对下一个效果有疑问。当我单击下一步按钮时，此时我将使用translateX（ 100％）将新页面加载到div 2中。然后，我将divifyX（'-100％'）添加到div1中（此刻在屏幕上显示。translateX（'0％'））。效果应为div1的translateX（'-100％'）div1，然后为div2的translateX（'0％'）。所有翻译都以1.0秒的转换进行。

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.

这是可行的。

但是，当我再次单击下一个按钮时，div1是带有translateX（'-100％'）的（在左侧，屏幕外），所以我删除了该类使用translateX（'-100％'），并添加另一个带有translateX（'100％'）的类，且不进行过渡。然后，我删除该类，并添加另一个带有translationX（'0％'）且过渡为1.0s的类。我为div2删除了带有translationX（'0％'）的课程，并添加了另一个带有translateX（'-100％'）的课程。但这是行不通的。 div1是在屏幕左侧而不是屏幕右侧输入。有想法吗？

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?

CSS

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

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

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

HTML

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

JavaScript

The JavaScript

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

推荐答案

这很可能是因为您没有给浏览器之间的时间，以在添加translateX（100％）和将其更改为translateX（0％）之间进行更新。这导致它只运行带有动画的translateX（0％）（导致它来自左侧）。如果改为将translateX（0％）移到setTimeout为0，则它​​应该可以正常工作，因为它使浏览器有时间刷新CSS。 （请注意，有一些更好的方法可以代替setTimeout，但可以进行测试）

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 此处

jsFiddle here

这篇关于css3和jquery加载页面滑块效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！