css3和jquery加载页面滑块效果

嗨我正在尝试使用css3和jquery创建一个完整的页面加载滑块效果。 为此，我使用两个div来加载页面。 我有前一个，后一个和下一个按钮。 我有下一个效果的问题。 当我点击下一个按钮时，我现在用translateX（’100％’）将新页面加载到div 2中。 然后我将translateX（’ – 100％’）添加到div1（此时屏幕上的translateX（’0％’））。 效果应该是translateX（’ – 100％’）div1，然后是div2的translateX（’0％’）。 所有翻译都是1.0s的过渡。

这很有效。

但是，当我再次点击下一个按钮时，div1与translateX（’ – 100％’），（在左边，在屏幕外），所以我用translateX（’ – 100％’）删除了类，并用translateX添加另一个类（’100％’）过渡期。 然后我删除这个类并添加另一个带有translateX（’0％’）的类，转换为1.0s。 我为div2删除了带有translateX（’0％’）的类，并使用translateX（’ – 100％’）添加另一个向左移动。 但这不起作用。 div1由屏幕左侧而不是右侧进入。 任何的想法？

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

JavaScript

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

Answer 1

这很有可能发生，因为您没有给浏览器添加translateX（100％）然后将其更改为translateX（0％）之间的更新时间。 这导致它仅使用动画运行translateX（0％）（使其来自左侧）。 如果您将translateX（0％）移动到setTimeout为0，它应该可以正常工作，因为它为浏览器提供了刷新CSS的时间。 （注意有更好的方法而不是setTimeout但它可以测试它）

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

jsFiddle 在这里