在交叉观察器中使用svg动画库vivus的最佳方法

Question

我使用vivus.js来制作SVG动画。关于性能，我想知道将它与交叉观察器结合使用的最佳方式是什么。

在我的页面上有几个部分，包括内联svg。这些svg应该在向下滚动页面时设置动画，在离开视区时停止，并在再次观察到容器时重新启动。

它可以工作，但我不确定这是否是构建vivus对象的最好方法，并以这种方式反复播放它们。这些解决方案似乎会使firefox的性能崩溃。

我欢迎所有的意见、建议和拟议的改进。

$( document ).ready(function() {
    //Define observed Items
    var myItems = document.querySelectorAll(".observed-item");

    //Define observer Options
    var observeroptions = {
        root: null,
        rootMargin: "-35% 0% -35% 0%",
        threshold: 0,
    };

    //Create new Observer Object
    var observer = new IntersectionObserver(function(entries, observer){
        entries.forEach(function(entry){

//Define Index Variable
var myIndex = $(entry.target).index();


var myvivus = new Vivus("item-svg" + myIndex, {
                    duration: 150,
                    start: 'manual'
                },
                function () {
                   $(entry.target).addClass('callback-item-animation');
                }
            )


            if (entry.intersectionRatio > 0) {

                //Add class to Entry Target
                $(entry.target).addClass("item-animate");
                myvivus.reset().play();

} else {
//Remove animated Class from observed Item
                $(entry.target).removeClass("item-animate");
                myvivus.stop().reset();

            }

        });
    },observeroptions);

    myItems.forEach(function(myItem) {
        observer.observe(myItem);
    });

});

我创造了一支笔：

https://codepen.io/Milenoi/pen/JBxgOG

请注意:在Chrome + Firefox中不使用Polyfill

正如你所看到的，动画没有像预期的那样工作，svg动画应该在离开观察者时停止，并重新开始，wenn元素再次相交。

Answer 1

您的提升观察者，并在函数中与它发生冲突。将var或let添加到观察者=之前，然后将该函数中观察者的名称更改为唯一的名称。也可以用window来限定所有的东西。或上下文。这应该会略微提高性能。