Firefox 在 CSS3 转换之前不更新 DOM

Question

我正在尝试构建一个非常简单的滑块。我想对动画和 js 使用 CSS3 过渡，将动画输入和动画输出类依次应用于各个帧。

我在这里写了一个关于 jsfiddle 的基本预期功能的工作演示：http://jsfiddle.net/7myKg/3/

这很简单。帧通过应用 animate-in 类进行动画处理，并通过应用 animate-out 类进行动画处理。例如，这将显示第二帧：

<div class="slider" id="slider">
    <ul>
        <li id="frame1" class="animate-out"><p>one</p></li>
        <li id="frame2" class="animate-in"><p>two</p></li>
        <li id="frame3"><p>three</p></li>
    </ul>
</div>​

在我可以对帧进行动画处理之前，我需要确保它已重置并且帧不得转换到它的重置状态。为了实现这一点，我在框架中添加内联样式以将其转换持续时间设置为 0，然后再删除它的动画输出类。这目前在 Chrome 中按预期工作。我遇到的问题是 Firefox 似乎在 DOM 反映元素样式的更改之前应用了 animate-in 类，这导致元素/框架向后过渡。在 Firefox 中运行演示比解释更容易看到。我添加了一个带有延迟的 setTimeout 包装来演示我期望它的行为方式。

我错过了什么？为什么 Firefox 不立即更新 DOM 元素？

我自己从头开始构建它作为一种学习体验，因为我认为这是一个我能够解决的奇怪问题。它不打算用于生产，至少目前肯定不是。出于这个原因，我不想使用众多现有解决方案或插件之一。

注意：这是我的第一个问题，因此，如果我在将来如何提出更好的问题方面做错了任何有建设性的建议，我们将不胜感激。

谢谢。

Answer 1

-moz-transition:left

我开始摆弄，但更喜欢从干净的页面开始。

跳出来的第一个问题是-moz-transition: 和-o-transition: 一样被省略了。 我现在很累，真的懒得看it，但上次我检查时，所有浏览器仍然需要自己的前缀，而 IE(9) 仍然不需要' t 支持转换。

编辑：Apparently since FF16, the -moz- prefix isn't needed.

其次；您没有在您的 CSS 声明中说明您希望转换的样式属性。即-moz-transition:left 1s;。

第三；我不记得细节了，因为我认为 info 的用处不大，但我记得读过关于 setTimeout 携带参数的文章并不普遍稳定。我可能在某处的developer.mozilla 上读过它。甚至可能在这里某个地方。

编辑：Typically IE specific。我还是会使用一个简单的匿名函数。

正如我所说，我开始摆弄代码，但更愿意重写。

我也说过，我很累（快睡着了），所以我现在不会这样做，但明天可能会。同时，尝试修复这三点。

更新

发布编辑（我对 -moz- 前缀的看法是正确的 :-)

我忍不住JsFiddle

HTML

<div>
    <input type="checkbox" id="overflowHidden"><p>overflow: hidden</p>
    <button id="next">Next</button>
</div>
<div class="slider">
    <ul id="slider" class="a">
        <li id="frame3"><p>three</p></li>
        <li id="frame1"><p>one</p></li>
        <li id="frame2"><p>two</p></li>
    </ul>
</div>​

CSS

input {
    display:inline-block;
    margin:10px 0px 0px 10px;
}
button {
    display:inline-block;
    margin:0px 0px 0px 10px;
    vertical-align:2px;
}
p {
    display:inline-block;
    margin:0px 0px 0px 5px;
    vertical-align:2px;
}
.slider {
    margin: 2em auto;
    padding: 0;
    width: 200px;
    height: 200px;
}
#slider {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.slider li {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    -o-transition:left 1s ease-in-out;
    -webkit-transition:left 1s ease-in-out;
    -moz-transition:left 1s ease-in-out;
    transition:left 1s ease-in-out;
}
#frame1 {
    background:#e08080;
}
#frame2 {
    background:#e0e080;
}
#frame3 {
    background:#8080e0;
}
#slider.a #frame1{
    left: 0%;
}
#slider.a #frame2{
    left: -100%;
}
#slider.a #frame3{
    left: 0%;
}
#slider.b #frame1{
    left: 0%;
}
#slider.b #frame2{
    left: 0%;
}
#slider.b #frame3{
    left: -100%;
}
#slider.c #frame1{
    left: -100%;
}
#slider.c #frame2{
    left: 0%;
}
#slider.c #frame3{
    left: 0%;
}

JavaScript

(function () {
    window.addEventListener("load", function () {
        var slider = document.getElementById("slider");
        document.getElementById("next").addEventListener("click", function () {
            var c = slider.getAttribute("class");
            c = c === "a" ? "b" : c === "b" ? "c" : c === "c" ? "a" : c;
            slider.setAttribute("class", c);
            slider.appendChild(slider.getElementsByTagName("li")[0]);
        }, false);
        // adding a toggle for overflow just for demo
        document.getElementById("overflowHidden").addEventListener("change", function () {
            if (this.checked) {
                slider.style.overflow = "hidden";
            } else {
                slider.removeAttribute("style");
            }
        }, false);
    }, false);
}());

当然，有很多不同的方法可以完成这类事情。通常，我从想象自己想要什么开始，然后从那里开始构建，而不是尝试使用特定的方法以特定的方式使某些东西发挥作用。

JavaScript 完成的大部分工作可以使用@keyframes 传递给 CSS，而不是使用多个元素。但这总是取决于确切的情况，不是吗？

考虑一下，尽管只需要 2 个颜色面板，其中一个可能是背景。这允许只需要移动一个元素（将其滑过，将背景设置为相同的颜色，将其发送回而不进行过渡，更改其颜色，然后就可以再次滑过）。

虽然学习的小项目非常有趣（我知道），但它们可能会有点失控，有时最好去掉我们学到的所有东西，回到基础。

我真的不是要光顾。祝你好运:-)