css3 和 jquery 加载页面滑块效果答案

【问题标题】：css3 and jquery load page slider effectcss3 和 jquery 加载页面滑块效果
【发布时间】：2015-02-16 18:00:31
【问题描述】：

您好，我正在尝试使用 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');

【问题讨论】：

我已经尝试过了，但我遇到了同样的问题。它看起来像是从课堂到左到课堂到屏幕。
好的，它可以与 setTimeOut 一起使用，但前提是我在 settimeOut 函数中添加了 remove(to-next).add(to-screen)。但是延迟了 1 秒，所以我有将近 1 秒的空白。我该怎么做才能消除延迟。
完成！！！！如果我添加 1 毫秒的延迟，它会起作用。

标签： jquery css animation transition effect

【解决方案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

【讨论】：