CSS transition not working on dynamic set

[stacyrose]

I am having an issue dynamically using the CSS transition attribute for a simple JavaScript slide carousel.

The carousel works fine, but the CSS transition does not work as expected. Am I missing something here?

Here is a JS Bin

HTML

<div id="slider-wrapper">
    <ul>
      <li data-active="true">Slide one</li>
      <li data-active="false">Slide two</li>
      <li data-active="false">Slide three</li>
    </ul>
</div>

CSS

#slider-wrapper {
    float: left;
    width: 500px;
    border: thin dotted;
    /* overflow-x: hidden; */
    height: 100px;
}

#slider-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100px;
}

#slider-wrapper ul li {
    list-style-type: none;
    margin: 0;
    width: 100%;
    clear: both;
    height: 100px;
    float: left;
    display: none;
    margin-left: 100%;
}

#slider-wrapper ul li[data-active='true'] {
    display: block !important;
    margin: 0 !important;
    transition: margin 1s;
}

JavaScript

// get slide deck (returns ul)
var slideDeck = document.getElementById('slider-wrapper').children[0];

/** slideIndex
  * @param integer
  * @return object
*/
function slideIndex(par) {
    for (var i = 0; i < slideDeck.children.length; i++) {
        if (slideDeck.children[i].getAttribute("data-active") == "true") {

            var activeSlide = slideDeck.children[i];
            var slideIndex;

            // previous slide
            if (par == -1) {
                // if currently on first slide
                if (i == 0) {
                    slideIndex = slideDeck.children.length - 1;
                }
                else {
                    slideIndex = i - 1;
                }
            }
            // current slide
            else if (par == 0) {
                slideIndex = i;
            }
            // next slide
            else if (par == 1) {
                // if currently on last slide
                if (i == slideDeck.children.length - 1) {
                    slideIndex = 0;
                }
                else {
                    slideIndex = i + 1;
                }
            }

            return {
                      el: slideDeck.children[slideIndex],
                      index: slideIndex
                   };
        }
    }
}

// run a timeout loop to linear transgression
setInterval(function() {
    // get slides
    var currentSlideElement = slideIndex(0).el;
    var previousSlideElement = slideIndex(-1).el;
    var nextSlideElement = slideIndex(1).el;

    currentSlideElement.setAttribute("data-active", "false");
    nextSlideElement.setAttribute("data-active", "true");

    console.log('ok');
}, 5500);

 

[Jessicahoney]

Try putting the transition in all lis instead of just the active one.

#slider-wrapper ul li {
    list-style-type: none;
    margin: 0;
    width: 100%;
    clear: both;
    height: 100px;
    float: left;
    display: none;
    margin-left: 100%;
    transition: margin 1s ease-in-out;
}

 

[Neo_5678]

Why don't you consult a CSS expert or web developer?

no need to post development issues in the SEO category!

 

[nikki shah]

Please make such posts in relevant category