路口观察员不与兄弟姐妹一起工作

Question

我有一个 flexbox 容器，有 4 个孩子，每个孩子都有with:50% 。

我想为每个孩子创建一个 IO （交叉点观察者），但由于某种原因，它只适用于 1º 和 3º 元素......但是如果我为 2º 和 4º 元素创建一个新的 IO ，它可以工作。

我究竟做错了什么？

这是演示： https://codepen.io/sandrina-p/pen/mddzpzW

Answer 1

你的代码是这样的：

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

它需要是这样的：

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

按照你的方式，如果多个元素同时触发观察者，它只会在第一个元素上运行 function。 我拥有它的方式，它在每个匹配的条目上运行它。