通过改变css top在div动画中垂直滚动

Question

我正在尝试设置水平滑块。 我有div overflow: hidden和内部我有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将是空的，否则因为它在async后端调用完成后进行评估，然后DOM被完全加载。 但它与这个脚本的真实逻辑并不真正相关，它只是附加信息。

• 这段代码对我来说非常糟糕。 我怎么能改进它？
• 它开始在大约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代码之上。

---

---

---

**编辑**

---

---

---

我更新问题我添加了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

这是演示

我不知道为什么，但在plunker它根本没有udpate css top of elements。

Answer 1

首先，我建议您为html / css视图使用仅限bootstrap的解决方案，因为它具有响应性，经过测试并且您将拥有更清晰的代码。

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

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

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

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

这只是一个可以帮助您重构代码的ideia，这样您就不需要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);
                    });
            }

        }
    }

})();

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