使用 for 循环而不是为每个元素创建新的 var

Question

我创建了当元素进入视口时触发的动画。问题是我必须为每个元素重复相同的代码。我正在使用 anime.js 和 scrollMonitor.js 来制作动画，但很难实现 for-loop。

这是我的代码：

        $(window).on("load", function() {
            'use strict';

            var elementWatcher1 = scrollMonitor.create('#about', -200);
            elementWatcher1.enterViewport(function() {
                var startAnimation = anime.timeline();
                startAnimation
                    .add({
                        targets: '#about .toAnimate',
                        translateY: [50, 0],
                        opacity: 1,
                        duration: 600,
                        delay: function(el, index) {
                            return index * 80;
                        },
                        easing: 'easeOutQuad'
                    });
                this.destroy();
            });
            var elementWatcher2 = scrollMonitor.create('#portfolio', -200);
            elementWatcher2.enterViewport(function() {
                var startAnimation = anime.timeline();
                startAnimation
                    .add({
                        targets: '#portfolio .toAnimate',
                        translateY: [50, 0],
                        opacity: 1,
                        duration: 600,
                        delay: function(el, index) {
                            return index * 80;
                        },
                        easing: 'easeOutQuad'
                    });
                this.destroy();
            });
            var elementWatcher3 = scrollMonitor.create('#gallery', -200);
            elementWatcher3.enterViewport(function() {
                var startAnimation = anime.timeline();
                startAnimation
                    .add({
                        targets: '#gallery .toAnimate',
                        translateY: [50, 0],
                        opacity: 1,
                        duration: 600,
                        delay: function(el, index) {
                            return index * 80;
                        },
                        easing: 'easeOutQuad'
                    })
                    .add({
                        targets: '#gallery .toAnimateToo',
                        opacity: 1,
                        duration: 600,
                        delay: function(el, index) {
                            return index * 80;
                        },
                        easing: 'easeOutQuad',
                        offset: 0
                    });
                this.destroy();
            });
        });

有谁知道如何将它放入 for 循环中？

Answer 1

在 ES5 中，只需对这些选择器的数组使用 forEach 循环：

$(window).on("load", function() {
    'use strict';

    ["#about", "#portfolio", "#gallery"].forEach(function(selector) {
        var elementWatcher = scrollMonitor.create(selector, -200);
        elementWatcher.enterViewport(function() {
            var startAnimation = anime.timeline();
            startAnimation
                .add({
                    targets: selector + ' .toAnimate',
                    translateY: [50, 0],
                    opacity: 1,
                    duration: 600,
                    delay: function(el, index) {
                        return index * 80;
                    },
                    easing: 'easeOutQuad'
                });
            this.destroy();
        });
    });
});

在 ES2015+ 中，您可以使用 for-of 代替（const 代替 elementWatcher）。

使用 for 循环而不是为每个元素创建新的 var

Using for-loop instead of creating new var for every element

javascript

for-loop

repeat

anime.js

scrollmonitorjs