通过更改css顶部在div动画中垂直滚动

Question

我正在尝试设置水平滑块。我有 overflow: hidden 的 div，在里面我有 16 个高度为 60px 的 div。父 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 指令中，而我通过querySelectorAll 获得的 NodeList 将是空的，否则因为它是在异步后端调用完成之后评估的，然后 DOM 完全加载。但它与这个脚本的真实逻辑并不真正相关，它只是附加信息。

• 我觉得这段代码很糟糕。我该如何改进它？
• 大约 20 秒后开始更新顶部，1 div 有 960 像素，我不知道为什么。
• 它不会重置此变量值，因此它不会循环，但会越来越多地增加 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 代码之上。

---

---

---

** 编辑 **

---

---

---

我更新问题我添加了 plunker 显示问题，我再解释一个，一步一步我想要完成的。

• Step1：所有元素都有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

here's demo

我不知道为什么，但在 plunker 中它根本不更新元素的 css 顶部。

Answer 1

首先，我建议您为您的 html/css 视图使用仅引导程序的解决方案，因为它响应迅速、经过测试并且您将拥有更简洁的代码。

我已经对您的滑块逻辑进行了一些修改，使逻辑就像您的滑块是分页指令一样。

基本上，您将数据划分为页面，然后跟踪要在视图上显示的当前页面。

在您的元素指令中，您对数据使用两个过滤器（startFrom、limitTo）。 “limitTo”是 Angular 中的内置过滤器，“startFrom”是您必须创建的自定义过滤器。

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

这只是一个想法，可以帮助您重构代码，这样您就不需要 css 定位来确定将显示哪些项目。这是我的演示：

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

我希望这会有所帮助！

Answer 2

我已经用这段代码完成了：

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

        }
    }

})();

但是这段代码看起来仍然很蹩脚，虽然它比第一个版本好一点。我觉得它可以以更简单的方式完成。