Question

I’m trying to build a really simple slider. I want to use CSS3 transitions for the animations and js to apply an animate-in and animate-out class to individual frames in sequence.

I’ve written a working demo of the basic intended functionality on jsfiddle here: http://jsfiddle.net/7myKg/3/

It’s very simple. A frame is animated in by applying the animate-in class and animated out by applying the animate-out class. For example this would display the second frame:

<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>​

Before I can animate-in a frame I need to ensure it is reset and the frame MUST NOT transition to it’s reset state. To achieve this I’m adding inline styles to the frame to set it’s transition-duration to 0s before removing it’s animate-out class. This currently works as intended in Chrome. The problem I am having is that Firefox seems to be applying the animate-in class before the DOM has reflected the changes to the element’s style, and this causes the element/frame to transition backwards. Easier seen by running the demo in Firefox than explaining. I added a setTimeout wrap with a delay to demo how I was expecting it to behave.

What am I missing? Why doesn’t Firefox update the DOM element instantly?

I’m building this myself from the ground up as a learning experience and because I thought it was a curious problem I would be able to solve. It is not intended for production, at least certainly not at the moment. For this reason I do not want to use one of the many existing solutions or plugins.

Note: This is my first ever question so any constructive tips if I’ve done something wrong on how I can ask better questions in the future would be greatly appreciated.

Thank you.

Answer 1

-moz-transition:left

I started fiddling, but prefer to start with a clean page.

The first issue that leaps out is that -moz-transition: is omitted as is -o-transition:.
I’m very tired right now and genuinely can’t be bothered to look it up, but the last time I checked, all the browsers still need their own prefix, and IE(9) still doesn’t support transitions.

EDIT: Apparently since FF16, the -moz- prefix isn’t needed.

Secondly; you’ve not stated in your CSS declaration what style property you wish to transition. i.e. -moz-transition:left 1s;.

Thirdly; I can’t remember the details, because I thought the usefulness of the info slight, but I recall reading about setTimeout carrying arguments as being less than ubiquitously stable. I may have read it on developer.mozilla somewhere. Might even have been around here somewhere.

EDIT: Typically IE specific. I’d still just use a simple anonymous function.

As I say, I started to fiddle with the code, but would prefer to rewrite.

Like I also say, I’m very tired (near sleep) so I’ll not be doing that right now, but may tomorrow. In the meantime, try fixing those three points.

Update

Post edits (I was right about the -moz- prefix 🙂

I couldn’t help myself 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);
}());

Of course there are many different ways to accomplish this sort of thing. As a rule I start with imagining what I want, and build out from there, rather than trying to make something work in a particular way, using particular methods.

The bulk of the work done by the JavaScript could be passed off to CSS using @keyframes, and not using multiple elements. But it always depends on the exact circumstances doesn’t it?

Consider though that 2 panels of color are all that is needed, and one of those could be the background. Which allows that only one element need be moved around (slide it across, set the background to the same color, send it back without transition, change it’s color, and it’s ready to slide across again).

Although little projects for learning are awesome fun (I know), they can get a little out of control, and sometimes it’s good to strip out all the stuff we learned, and get back to basics.

I genuinely do not mean to patronize. Good fortune 🙂