Javascript 交叉点观察者（滚动动画）不工作

我在观看

交叉口观察者时遇到了这个问题。我的是一个div，而不是一个图像，所以我不必像视频中那样指定属性，我相信我几乎做得很好，因为我得到了10个控制台日志，因为我有10个div和一个类“box”，它们在JS文件中用作变量。我使用了不透明度和变换作为CSS中所示的动画。我明白我做错了什么，我不能看到滚动动画发生


const targets=document.querySelectorAll（'.box'）；
const lazyLoad=目标=>{
常量io=新的IntersectionObserver（（条目，观察者）=>{
entries.forEach（entry=>{
log（'helloworld'）；
if（输入。isIntersecting）{
const div=entry.target；
div.classList.add（'fade'）；
observer.disconnect（）；
}
});
});
观察（目标）；
};
目标。forEach（懒散负荷）
：根目录{
--原色：#425b84；
--二次色：#5b7bb4；
--最大宽度：1100px；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体：普通1rem/1.5“Arial”，无衬线；
背景：var（--原色）；
颜色：#fff；
溢出x：隐藏；
填充底部：50px；
}
#主割台{
背景：var（--二次色）；
填充：4REM0；
}
.集装箱{
最大宽度：var（--最大宽度）；
保证金：0自动；
文本对齐：居中；
}
h1{
字体大小：2.3rem；
}
#时间线ul{
背景：var（--原色）；
填充：50px0；
}
/*创建线*/
#时间轴ul-li{
列表样式：无；
位置：相对位置；
宽度：6px；
保证金：0自动；
填充顶部：50px；
背景：#fff；
}
/*盒子*/
#伊利分区{
位置：相对位置；
底部：0；
宽度：400px；
填充：1rem；
背景：var（--二次色）；
过渡：所有0.5s缓进缓出；
不透明度：0；
}
.褪色{
不透明度：1；
过渡：所有0.5s缓进缓出；
变换：translateX（0）；
}
/*右侧*/
#时间线ul li:第n个孩子（单数）分区{
左：40px；
转换：translateX（1100px）；
}
/*左侧*/
#时间线ul li：第n个孩子（偶数）分区{
左：-434px；
转换：translateX（-1100px）；
}
/*圆点*/
#李：之后{
内容：''；
位置：绝对位置；
左：50%；
底部：0；
宽度：25px；
高度：25px；
背景：var（--二次色）；
转化：translateX（-50%）；
边界半径：50%；
过渡：背景0.5s缓进缓出；
}
/*箭座*/
#时间轴分区：之前{
内容：''；
位置：绝对位置；
底部：5px；
宽度：0；
身高：0；
边框样式：实心；
}
/*右侧箭头*/
#时间线ul li:第n个孩子（单数）分区：之前{
左：-15px；
边框宽度：8px 16px 8px 0；
边框颜色：透明var（-secondary color）透明透明；
}
/*左侧箭头*/
#时间线ul li:第n个孩子（偶数）分区：之前{
右图：-15px；
边框宽度：8px 0 8px 16px；
边框颜色：透明var（--次颜色）；
}
@介质（最大宽度：900px）{
#伊利分区{
宽度：250px；
}
#时间线ul li：第n个孩子（偶数）分区{
左：-284px；
}
}
@介质（最大宽度：600px）{
#时间轴ul-li{
左边距：20px；
}
#伊利分区{
宽度：计算（100vw-90px）；
}
#时间线ul li：第n个孩子（偶数）分区{
左：40px；
}
/*右侧箭头*/
#时间线ul li:第n个孩子（偶数）分区：之前{
左：-15px；
边框宽度：8px 16px 8px 0；
边框颜色：透明var（-secondary color）透明透明；
}
}

知识时间线
知识简历
俊荣


2007年：HTML&；CSS
我的同僚们都是精英。在动物的生命中，智慧的劳动实践是必要的，而人类的劳动实践则是必须的



2009:JavaScript和jQuery
我的同僚们都是精英。在动物的生命中，智慧的劳动实践是必要的，而人类的劳动实践则是必须的



2010年：PHP和Wordpress
我的同僚们都是精英。在动物的生命中，智慧的劳动实践是必要的，而人类的劳动实践则是必须的



2011年：RubyonRails
我的同僚们都是精英。在动物的生命中，智慧的劳动实践是必要的，而人类的劳动实践则是必须的



2012年：Python
我的同僚们都是精英。在动物的生命中，智慧的劳动实践是必要的，而人类的劳动实践则是必须的



2013:Node.js和React
我的同僚们都是精英。在这一时期，劳动实践需要智慧，需要知识，需要知识
const targets = document.querySelectorAll('#timeline li');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries,observer) => {
    entries.forEach(entry => {
      console.log('hello World');
      if(entry.isIntersecting) {
        const div = entry.target.children[0];

        div.classList.add('fade');

        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

targets.forEach(lazyLoad);

#timeline ul li:nth-child(odd) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}
#timeline ul li:nth-child(even) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}

#timeline ul li:nth-child(odd) div.fade, #timeline ul li:nth-child(even) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}