CSS 带有 'IntersectionObserver' 的动画不起作用（Vanilla JS）

Question

我的 InsersectionObserver 代码有问题：.timeline-graphs class 的内容应该是从下面出现（@keyframes 动画 CSS），但仅当视口与其相交时，感谢 InsersectionObserver（JS ).很简单，但我无法让它工作。这是代码：

HTML、CSS 和 JAVASCRIPT:

const elementsToExpand = document.querySelectorAll('.timeline-graphs');

let expansionObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('isVisible');
    } else {
      entry.target.classList.remove('isVisible');
    }
  });

});

elementsToExpand.forEach((element) => {
  expansionObserver.observe(element);
});

.timeline-graphs {
    display: flex;
    flex-flow: row no-wrap;
    justify-content: center;
    text-align: center;
    align-items: center;

}

.timeline-graphs.isVisible {
    
    animation-name: fadeIn;
    animation-duration: 2.5s;
    animation-fill-mode: both; 
}

@keyframes fadeIn {

    0% {
    opacity: 0;
    
    -webkit-transform: translate3d(0,40%,0);
    transform: translate3d(0,40%,0);
    }

    100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }
}

<section class="timeline-graph-section">
    <article class="timeline-graphs">
        <h1>This is a title</h1>
    </article>
</section>

感谢大家对此的支持！

Answer 1

根据您当前的实施，视口始终与您的 timeline-graphs 元素相交。

为了模仿正常工作，向该元素添加大量 margin-top 并尝试通过滚动将 timeline-graphs 移入和移出视图。

Answer 2

已解决！在看到每个人都可以使用的代码（包括亲眼看到它在 Codepen 中工作）但从未在我的本地存储库中看到后，我怀疑它必须是以下两种情况之一：有一个隐式的 library/framework 在工作Whosebug/CodePen 我没有使用...或者我没有包含在此处的 HTML 代码有问题。

就是这样：我将脚本从 head 元素中取出，并将其放在 body 元素内的最后一行，就在结束标记之前。现在代码可以工作了！谢谢大家的帮助！

CSS 带有 'IntersectionObserver' 的动画不起作用（Vanilla JS）

CSS animation with 'IntersectionObserver' doesn't work (Vanilla JS)

javascript

css

css-animations

intersection-observer