CSS过渡不适用于动态集

Question

我在使用CSS transition属性动态创建简单的JavaScript幻灯片轮播时遇到问题。

轮播可以正常工作，但是CSS transition无法按预期工作。我在这里想念什么吗？

这里是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);

Answer 1

正如我的评论中所述：

每个状态的display值都不同。即使您仅尝试转换margin，display的更改也会影响到它并使margin无效。

您应该尝试使用translate和opacity代替，因为无论如何您都具有固定的高度（如果应该根据内容来确定高度，则这种解决方案会分崩离析，但这不是问题的一部分，所以我'我认为这没问题）。>>

// 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);
#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: inherit; /* For consistency */
    position: relative; /* To contain each slide */
}

#slider-wrapper ul li {
    list-style-type: none;
    margin: 0;
    width: 100%;
    height: 100%;
    /* Removed all float/margin related properties */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0; /* Hide it visually */
    pointer-events: none; /* Disable interactions */
    transform: translateX(100%); /* Move it away!*/
    transition: all 1s; /* Feel free to make this a concise list of properties */
}

#slider-wrapper ul li[data-active='true'] {
    opacity: 1; /* Show it */
    pointer-events: auto; /* Restore interactions */
    transform: translateX(0); /* Put it back in the centre */
}
<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>

Answer 2

尝试将过渡放在所有li中，而不只是活动的过渡中。