2

我需要在基于IntersectionObserver API返回的元素相交时触发动画的网页上显示多个动画计数器。

我观察到的是，尽管 API 在大多数情况下对所有计数器都返回 true，但只有第一个动画被执行，而对于其余的动画，我需要向上/向下滚动页面以使其余的计数器产生动画。

即使我只需要用数据属性中的值替换内部文本（这样做是为了验证动画脚本不是罪魁祸首），这种不一致的行为仍然成立。

下面是单个网页上 3 个计数器的代码和屏幕截图，即使所有三个计数器都在屏幕的第一折内，只有第一个可以工作。

HTML：

<div class="counter-value" data-count="10000">0</div>
<div class="counter-value" data-count="183.4">0</div>
<div class="counter-value" data-count="270">0</div>

JS：

var config = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
};

function callback(entry, observer){
    console.log(entry);
    if (entry[0].isIntersecting) {

        var $this = $(entry[0].target),
            countTo = $this.attr('data-count');

        $this.prop({
            countNum: $this.text()
        }).animate({
            countNum: countTo
        },
        {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $this.text(Math.floor(this.countNum));
            },
            complete: function () {
                var localNum = this.countNum.toLocaleString()
                $this.text(localNum);
                console.log(localNum);
            }
        });
        observer.unobserve(entry[0].target);
    };
};

var observer = new IntersectionObserver(callback,config);
var counters = document.querySelectorAll('.counter-value'); //make this an array if more than one item
counters.forEach(counter => {
    observer.observe(counter);
});

计数器和控制台的屏幕截图

如果您以前遇到过这样的问题，有什么建议吗？

4

1 回答 1

2

Intersection Observer API 接受一个回调，它将第一个参数设置为附加到观察者的所有条目。您必须遍历所有这些并检查它们是否相交。

function callback(entries, observer){
  entries.forEach(entry => {
    if (entry.isIntersecting) {

        var $this = $(entry.target),
            countTo = $this.attr('data-count');

        $this.prop({
            countNum: $this.text()
        }).animate({
            countNum: countTo
        },
        {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $this.text(Math.floor(this.countNum));
            },
            complete: function () {
                var localNum = this.countNum.toLocaleString()
                $this.text(localNum);
                console.log(localNum);
            }
        });
        observer.unobserve(entry.target);
    }
  }
};
于 2019-05-30T06:00:38.473 回答