5

我正在尝试构建一个非常简单的滑块。我想对动画和 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 元素？

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

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

谢谢你。

4

1 回答 1

2

-moz 过渡：左

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

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

编辑：显然从 FF16 开始，-moz- 前缀就不需要了。

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

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

编辑：通常是 IE 特定的 . 我仍然会使用一个简单的匿名函数。

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

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

更新

发布编辑（我对-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 个颜色面板，其中之一可能是背景。这允许只需要移动一个元素（将其滑过，将背景设置为相同的颜色，将其发送回而不进行转换，更改其颜色，然后准备再次滑过）。

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

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

于 2012-12-11T09:03:45.667 回答