Slideshow: CSS3 Transitions not working

Question

I've built a simple slideshow that can contain any number of images. When an image is clicked, it should advance to the next slide, and when the last image is clicked, it should return to the first slide.

That part is working fine, but when I try to add a CSS fade transition between each slide, it only works when I come back to the first slide.

I assume there's a problem with my CSS. Any ideas what I might be missing?

Here's the link to the Fiddle: http://jsfiddle.net/databass/76nZ7/13/

And here's the HTML, JavaScript, and CSS. Thanks!

HTML:

<div class="content">
    <img src="http://b.vimeocdn.com/ts/254/218/254218511_640.jpg" width="640"  height="360" />
</div>
<div class="content notcurrent">
    <img src="http://b.vimeocdn.com/ts/254/218/254218512_640.jpg" width="640" height="360" />
</div>
<div class="content notcurrent">
    <img src="http://b.vimeocdn.com/ts/254/218/254218513_640.jpg" width="640" height="360" />
</div>

JavaScript:

/*
 When the page loads, execute a function that assigns a sequence to each child slide 

 When a slide is clicked, the next slide will appear.
 On page load, the first slide will be shown

 Each slide should transition with fade-out/fade-in

*/

(function () {
    var slides = document.getElementsByClassName("content");
    slides[0].style.display = 'block';

    //convert collection of slide elements to an actual Array, and iterate through each slide
    Array.prototype.slice.call(slides).forEach(function (slideElement, slideSequence) {
        //execute this function for each slide. 
        (function () {
            // helper function to get the slide sequence. 
            // return 0 if we've gone through eevery slide
            var getNextSequence = function () {
                if (slideSequence + 1 === slides.length) {
                    return 0;
                } else {
                    return slideSequence + 1;
                }
            }
            // add a listener to each slide.
            slides[slideSequence].addEventListener("click", function () {
                slides[slideSequence].className = 'content notcurrent';
                slides[getNextSequence(slideSequence)].className = 'content current';
            });
        })();
    });
})()

CSS:

.content {
    width: 640px;
    height: 360px;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}
.notcurrent {
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    display: none;
}

.current {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

Answer 1

Give .current the option z-index: 10; and delete the display: none; for .notcurrent . Then you have to set the first item as .current when the page loads.

Demo: http://jsfiddle.net/76nZ7/18/

Answer 2

html:

<div class="content current">
   ...
</div>
<div class="content notcurrent">
   ...
</div>
<div class="content notcurrent">
   ...
</div>

css:

.content {
    ...
}
.notcurrent {
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
}
.current {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    z-index: 1;
}

http://jsfiddle.net/dvdyakonov/76nZ7/19/