Question

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

这很有效。

但是当我再次点击下一个按钮时，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

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

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 here

css3和jquery加载页面滑块效果

1 个答案: