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

1 个答案: