1

Коллеги, вопрос, который никак не могу решить.

Все ссылки на материалы в конце.

Хотел реализовать слайдер с цикличной перестановкой. Есть три слайда минимум. Все три на странице, но виден только один - средний. Анимация проходит за счет CSS transition на ширину.

То есть для переключения в правый слайд я убираю ширину левого, удаляю левый и вставляю справа следующий слайд. Так как слайдов три и всё зациклено, я подставляю справа тот слайд, который только что удалил. Для переключения в левый слайд я убираю слайд справа, убираю его ширину в 0, ставлю этот же слайд слева (т.к. всё зациклено), потом раздвигаю ширину в стандартную.

Ключевой момент - это прерывание блока выполнения кода браузером (вот тут на хабре про это написано). То есть, если подряд идет снижение ширины в 0, потом подстановка сладйда и сразу расширение в стандарт, то анимации не будет, т.к. браузер "проглотит" сужение и расширение ввиду того, что посчитает, что мы вернулись в ту же точку, откуда начали. Он просто вставит слайд и анимации мы не увидим. Для этого нужно прервать выполнение кода обращением к какому-нибудь свойству. Тогда браузер очнется и сделает всё после подстановки и мы увидим транзишн. Один из подобных блоков находится в скрипте "слайдер" на строчках 160 - 166.

Теперь к делу. Если нажимать просто "вперед", то всё отлично работает. Если нажимать "назад", то всё отлично работает. Если пару раз нажать "назад" и следом "вперед" без перезагрузки - тоже работает. Но вот если нажать сначала "Вперед", а потом "назад", то браузер начинает вести себя неадекватно. В древе html видно, что до анимации он убирает слайд в конце и ставит его в начало, затем расширяет его по ширине и видна анимация. Но как только закончится анимация, браузер как будто откатывает изменения назад: удаляет слайд из начала и ставит обратно в конец. В коде этого нет! Это какая - то фишка оптимизации операций на странице или типа того.

Почему я абсолютно уверен, что это мулька браузера, а не ошибка алгоритма? Вот почему: если закомментировать обращение к свойству offsetHeight на строке 165, то всё начинает работать правильно с точки зрения алгоритма и расстановки слайдов, НО пропадает анимация, т.к. нет обращения к свойству в ключевой момент, чтобы прервать поток выполнения кода.

Ссылка на gitHub

Через файлообменник dropmefiles

Через Гуглодиск

JSbin для быстроты

Очень прошу не бить по рукам. Да, ООП - структура прикручена криво и зря. Да, возможно, слайдер можно сделать проще. Но вопрос не в слайдере а в понимании того, почему это происходит. Я перевариваю любые ссылки на инфо-ресурсы и статьи на русском и английском языке. Разобраться очень хочется

Весь код слайдера ниже. Перед проблемной строкой внизу стоит комментарий

     window.onload = function (){
    var mySlider = new Slider('slider-1', 500, 300, '1s linear');
    mySlider.render();
    console.log(mySlider.getSliderObj());
    var FWD = document.getElementById('fwd');
    FWD.addEventListener('click',function(){
         mySlider.nextSlide.call(mySlider);
    });
    var BWD = document.getElementById('bwd');
    BWD.addEventListener('click',function(){
        mySlider.prevSlide.call(mySlider);
    });

}

function Slider(newSliderId, newSliderWidth, newSliderHeight, widthTransitionCSS){

    // Поля класса
    var currentPosition = 1;
    var sliderObj = document.getElementById(newSliderId);
    var slidesArray = [];
    var sliderWidth = newSliderWidth;
    var sliderHeight = newSliderHeight;
    var transition ='width ' + widthTransitionCSS;
    this.sliderObjy = sliderObj;
    this.slidesArrayy = slidesArray;

    // Геттеры
    this.getSliderObj = function(){
        return sliderObj;
    }
    this.getSlidesArray = function(){
        return slidesArray;
    }
    this.getSliderHeight = function(){
        return sliderHeight;
    }    
    this.getSliderWidth = function(){
        return sliderWidth;
    }
    this.getTransition = function(){
        return transition;
    }
    this.getCurrentPosition = function(){
        return currentPosition;
    }

    // Смысловые методы
    this.stepFwrd = function(){
        if(currentPosition + 1 >= slidesArray.length){
            return currentPosition = 0;
        }else{
            return ++currentPosition;
        }
    }
    this.stepBwrd = function(){
        if(currentPosition - 1 < 0){
            return currentPosition = slidesArray.length - 1;
        }else{
            return --currentPosition;
        }
    }
}

Slider.prototype.render = function(){
    var sliderObj = this.getSliderObj();
    sliderObj.style.display = 'none';
    console.log(sliderObj);
    var arrayOfSlides = this.getSlidesArray();

    while(sliderObj.hasChildNodes()){
        if(sliderObj.firstChild.tagName === 'DIV'){
            arrayOfSlides.push(sliderObj.firstChild);
        }
        sliderObj.removeChild(sliderObj.firstChild);
    }
    console.log(arrayOfSlides);

    var slidesWrapper = document.createElement('div');
    slidesWrapper.style.width = (this.getSliderWidth() * 3) + 'px';
    slidesWrapper.style.height = (this.getSliderHeight()) + 'px';
    slidesWrapper.style.margin = '0px -' + this.getSliderWidth() + 'px';
    slidesWrapper.style.display = 'flex';

    for(var i = 0; i < 3; ++i){
        slidesWrapper.appendChild(arrayOfSlides[i]);
    }

    sliderObj.appendChild(slidesWrapper);

    sliderObj.style.display = 'block';
}



Slider.prototype.nextSlide = function(){
    var slidesWrapper = this.getSliderObj().firstChild;
    var arrayOfSlides = this.getSlidesArray();

    var currentPosition = this.getCurrentPosition();
    var previousPosition = (function(){
        if(currentPosition - 1 < 0){
            return arrayOfSlides.length - 1;
        }else{
            return currentPosition - 1;
        }
    })();

    arrayOfSlides[previousPosition].style.transition = this.getTransition();
    arrayOfSlides[previousPosition].offsetHeight;
    arrayOfSlides[previousPosition].style.width = '0px';

    // Становимся в новую позицию
    currentPosition = this.stepFwrd();

    // Не следующая по счету позиция, а следующая загружаемая позиция
    var nextPosition = (function(){
        if(currentPosition + 1 >= arrayOfSlides.length){
            return 0;
        }else{
            return currentPosition + 1;
        }
    })();

console.log(this.getCurrentPosition());
    arrayOfSlides[previousPosition].addEventListener('transitionend', function(){
        slidesWrapper.removeChild(arrayOfSlides[previousPosition]);
        arrayOfSlides[previousPosition].removeAttribute('style');
        slidesWrapper.appendChild(arrayOfSlides[nextPosition]);
    }); 
}

Slider.prototype.prevSlide = function(){
    var slidesWrapper = this.getSliderObj().firstChild;
    var arrayOfSlides = this.getSlidesArray();

    var currentPosition = this.getCurrentPosition();;
    var nextPosition = (function(){
        if(currentPosition + 1 >= arrayOfSlides.length){
            return 0;
        }else{
            return currentPosition + 1;
        }
    })();

    slidesWrapper.removeChild(arrayOfSlides[nextPosition]);

    var currentPosition = this.stepBwrd();

    var previousPosition = (function(){
        if(currentPosition - 1 < 0){
            return arrayOfSlides.length - 1;
        }else{
            return currentPosition - 1;
        }
    })();

    console.log(this.getSliderWidth());

    arrayOfSlides[previousPosition].style.width = '0px';
    arrayOfSlides[previousPosition].style.transition = this.getTransition();
    slidesWrapper.insertBefore(arrayOfSlides[previousPosition],slidesWrapper.firstChild);

    // Если поставить комментарий ниже, то алгоритм заработает. Но пропадет анимация при движении слайдов влево
    arrayOfSlides[previousPosition].offsetHeight;
    arrayOfSlides[previousPosition].style.width = this.getSliderWidth() + 'px';


    arrayOfSlides[previousPosition].addEventListener('transitionend', function(){
        arrayOfSlides[previousPosition].removeAttribute('style');
    });
}
10
  • Если «это мулька браузера», то значит это не работает в каком-то одном конкретном браузере и работает во всех остальных? Если не работает везде, значит это «мулька» всё-таки алгоритма :) (код ещё не запускал, вы удобный запускабельный пример не дали, а мне лень)
    – andreymal
    21 мар 2018 в 13:40
  • Добавил ссылку на JSbin (jsbin.com/tojawam/edit?html,css,js,output)
    – Lex
    21 мар 2018 в 13:52
  • При закомментированном offsetHeight код работает, потому что у вас transitionend не срабатывает (потому что никакой transition и не начинался)
    – andreymal
    21 мар 2018 в 13:57
  • Вы вешаете одноразовые transitionend на элементы, а после использования не убираете их. Похоже, это неправильно; я досканально в коде ещё не разбирался, но, возможно, причина глюков именно в этом
    – andreymal
    21 мар 2018 в 13:58
  • При замене transitionend на setTimeout(..., 1000) (который одноразовый) глюк пропадает, так что похоже я угадал. Значит это «мулька» всё-таки алгоритма :)
    – andreymal
    21 мар 2018 в 14:00

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.