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，然后将该函数中的观察者名称更改为唯一的名称。还可以使用窗口限定所有内容。或上下文。这样应该可以稍微改善性能

最好的方法来使用SVG动画库维库与交集观察者

1 个答案: