CSS переход не работает в динамическом c наборе - PullRequest
Новая
       9

CSS переход не работает в динамическом c наборе

0 голосов
/ 15 апреля 2020

У меня проблема динамически с использованием атрибута CSS transition для простой JavaScript слайд-карусели.

Карусель работает нормально, но CSS transition не работает как ожидается. Я что-то здесь упускаю?

Вот JS Корзина

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);

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Как упоминалось в моем комментарии:

У вас есть разные значения 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>
0 голосов
/ 15 апреля 2020

Попробуйте поместить переход во все li с, а не только в активный. 

#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;
}
...