Вертикальная прокрутка в div анимации путем изменения css top

Question

Я пытаюсь настроить горизонтальный слайдер.У меня есть div с overflow: hidden, а внутри у меня есть 16 div с высотой 60px.Родительский div имеет высоту, поэтому вы можете видеть только 4 дочерних элемента.

Теперь я хочу изменить дочерние элементы top: css, чтобы они скользили вверх, а 4 новых - снизу.

Вотчто я сделал до сих пор

lastAddedService.getLastAdded()
    .then(function (response) {
        $scope.lastAddedElements = response.data;

        var i = 0, g = 0, c = 0, p = 0;
        var k = 1, b = 1, h = 1;

        var slider = {
            step: 1,
            positionTop: 0,
            init: function (step) {
                var that = this;
                el[0].querySelectorAll('.a').forEach(function (element) {
                    if(step === 1) {
                        if(i < 16) {
                            that.positionTop = i * 60;
                            i++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                    }
                    if(step === 2) {
                        if(i < 4) {
                            that.positionTop = k * 60 * -1;
                            i++; k++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                        if(i >= 4) {
                            k = 0;
                            that.positionTop = g * 60;
                            i++; g++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                    }
                    if(step === 3) {
                        if(i < 8) {
                            that.positionTop = b * 60 * -1;
                            i++; b++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                        if(i >= 8) {
                            that.positionTop = c * 60;
                            i++; c++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                    }
                    if(step === 4) {
                        if(i < 12) {
                            that.positionTop = h * 60 * -1;
                            i++; h++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                        if(i >= 12) {
                            that.positionTop = p * 60;
                            i++; p++;
                            return angular.element(element).css('top', that.positionTop);
                        }
                    }
                });
            },
            changeSlide: function (step) {
                this.step = step;
                this.init(this.step);
            }
        };

        $timeout(function () {
            slider.changeSlide(1);
        });

        setTimeout(function () {
            setInterval(function () {
                var q = 1;
                q++;
                slider.changeSlide(q);
                if(q === 4) {
                    q = 1;
                }
            }, 5000);
        }, 5000);

    }, function (err) {
        console.log('error getting last added');
    });
}

Итак, я собираю записи из бэкэнда, а затем есть этот объект-слайдер с логикой, которую я объяснил выше.

Бэкэнд-вызов работает нормально,Я сделал ответ консоли, и это 16 записей, которые я отображаю в слое макета позже.Вопрос в основном о логике для этого скользящего объекта.

Я использую $timeout, чтобы начать работу с кодом, потому что этот код действительно находится в директиве angularJS, а NodeList, который я получаю с помощью querySelectorAll, будет пустым, потому что иначеон оценивается после завершения асинхронного внутреннего вызова, а затем DOM полностью загружается.Но на самом деле это не имеет отношения к реальной логике этого скрипта, это просто дополнительная информация.

• Этот код выглядит очень плохо для меня.Как я могу улучшить его?
• Он начинает обновлять top примерно через 20 секунд, а 1 div имеет 960px, я не знаю почему.
• Он не сбрасывает значения этих переменных, поэтому нецикл, но он увеличивается top все дальше и дальше.

Я добавляю HTML из своей директивы, если кто-то хочет воспроизвести проблему

<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
    <div class="row u-no-margin">
        <div class="col-lg-11 col-xs-11">
            <h2 class="main__heading">
                Ostatnio dodane
            </h2>
            <div class="main__last-added-field">
                <div class="main__last-added a" data-ng-repeat="n in lastAddedElements">
                    <div class="row u-no-margin main__last-added-container">
                        <div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
                            <h4 class="main__last-added-heading">
                                {{ n.data.attributes.price }}
                            </h4>
                        </div>
                        <div class="col-lg-7 col-xs-8 u-no-padding">
                            <h4 class="main__last-added-heading u-no-padding">
                                {{ n.data.attributes.name }}
                            </h4>
                        </div>
                        <div class="col-lg-2 col-xs-2">
                            <button type="button" class="btn btn__primary">
                                Zobacz
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-1 col-xs-1">
            <div class="main__last-added-dot-container">
                <span class="main__last-added-dot main__last-added-dot--active"></span>
                <span class="main__last-added-dot"></span>
                <span class="main__last-added-dot"></span>
                <span class="main__last-added-dot"></span>
            </div>
        </div>
    </div>
</div>

Код JS находится в пределах директивы link: function иtemplateUrl находится над HTML-кодом.

---

---

---

** РЕДАКТИРОВАТЬ **

---

---

---

Я обновляю вопрос Я добавляю поршень, показывающий проблемуи я объясняю еще один шаг за шагом, что я хочу сделать.

• Шаг 1: все элементы имеют top: x css, поэтому они выровнены по вертикали.Я использую overflow: hidden для родителя, поэтому вы видите, что только 4 и 12 скрыты ниже, как это

• Step2 Я перемещаю первые 4 элемента в top: -x, чтобы вы не видели первые 4, и элементы 5,6,7,8 занимают их место, поэтому элементы 5,6,7,8 теперь скользят вверх, а первые 4 скрыты..

• шаг 3 аналогичен шагу 2: элементы 5,6,7,8 перемещаются к отрицательной вершине, и теперь вы видите элементы 9,10,11,12

• шаг 4 аналогичен шагу 3: элементы 9,10,11,12 перемещаются к отрицательной вершине, и теперь вы видите элементы 13,14,15,16

вот демо

Я не знаю почему, но в plunker это вообще не обновляет css top элементов.

Answer 1

Я сделал это с помощью этого кода:

<div class="main__last-added a"
     data-ng-repeat="n in lastAddedElements"
     data-order="{{ $index+1 }}">

(function () {
    'use strict';

    angular
        .module('igt')
        .directive('lastAdded', Directive);

    Directive.$inject = ['$timeout', 'lastAddedService'];

    function Directive($timeout, lastAddedService) {
        return {
            restrict: 'E',
            scope: {
                destiny: '='
            },
            templateUrl: 'html/directives/lastAdded.html',
            link: function ($scope, el) {
                lastAddedService.getLastAdded()
                    .then(function (response) {
                        $scope.lastAddedElements = response.data;
                        $scope.slider = {
                            increment: 0,
                            step: 1,
                            positionTop: 0,
                            init: function (step) {
                                var that = this;
                                var elements = el[0].querySelectorAll('.a');
                                if(step === 1) {
                                    console.log('run step 1 ..............');
                                    this.step = 1;
                                    elements.forEach(function (e) {
                                        var order = angular.element(e).attr('data-order');
                                        if(order <= 16) {
                                            that.positionTop = order * 60 - 60;
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                    });
                                }
                                if(step === 2) {
                                    console.log('run step 2 ..............');
                                    this.step = 2;
                                    elements.forEach(function (e) {
                                        var order = angular.element(e).attr('data-order');
                                        if (order <= 4) {
                                            that.positionTop = order * 60 * -1;
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                        if (order > 4) {
                                            that.positionTop = that.increment * 60;
                                            that.increment++;
                                            console.log(that.increment);
                                            if (that.increment === 12) {
                                                that.increment = 0;
                                                console.log('reset inc in step 2');
                                            }
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                    });
                                }
                                if(step === 3) {
                                    console.log('run step 3 ..............');
                                    this.step = 3;
                                    elements.forEach(function (e) {
                                        var order = angular.element(e).attr('data-order');
                                        if (order <= 8) {
                                            that.positionTop = order * 60 * -1;
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                        if (order > 8) {
                                            that.positionTop = that.increment * 60;
                                            that.increment++;
                                            console.log(that.increment);
                                            if (that.increment === 8) {
                                                that.increment = 0;
                                                console.log('reset inc in step 3');
                                            }
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                    });
                                }
                                if(step === 4) {
                                    console.log('run step 4 ..............');
                                    this.step = 4;
                                    elements.forEach(function (e) {
                                        var order = angular.element(e).attr('data-order');
                                        if (order <= 12) {
                                            that.positionTop = order * 60 * -1;
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                        if (order > 12) {
                                            that.positionTop = that.increment * 60;
                                            that.increment++;
                                            console.log(that.increment);
                                            if (that.increment === 4) {
                                                that.increment = 0;
                                                console.log('reset inc in step 4');
                                            }
                                            return angular.element(e).css('top', that.positionTop);
                                        }
                                    });
                                }
                            },
                            changeSlide: function (step) {
                                this.step = step;
                                this.init(this.step);
                            }
                        };

                        $timeout(function () {
                            var i = 1;
                            $scope.slider.changeSlide(i);
                            setInterval(function () {
                                i++; if(i === 5) i = 1;
                                $scope.slider.changeSlide(i);
                            }, 5000);
                        });

                    }, function (err) {
                        console.log('error getting last added: ' + err);
                    });
            }

        }
    }

})();

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

Answer 2

Прежде всего, я рекомендую вам использовать только загрузочное решение для вашего представления html / css, потому что оно отзывчиво, протестировано и у вас будет более чистый код.

Я внес некоторые изменения в логику вашего слайдера вТаким образом, логика такова, как будто ваш слайдер был директивой разбиения на страницы.

По сути, вы разделяете свои данные на страницы, а затем отслеживаете текущую страницу, отображаемую в представлении.

В директиве elements вы используете два фильтра данных (startFrom,ограничено до).'LimitTo' - это встроенный фильтр в Angular, а 'startFrom' - это пользовательский фильтр, который вам нужно создать.

<div class="" data-ng-repeat="n in elements | startFrom:currentPage*pageSize | limitTo:pageSize">

Это просто идея, которая может помочь вам реорганизовать код так, чтобы выне нужно позиционировать CSS, чтобы определить, какие элементы будут отображаться.Вот мое демо:

https://plnkr.co/edit/IROsQWr5z4oYgZzmR2GF?p=preview

Надеюсь, это поможет!