我正在學習編寫滾動動畫的教程，但是當作者的代碼顯示動畫時(3:48)，我的代碼什么也沒有顯示。

問題是hidden類設置了不透明度:0，而觀察者永遠無法觀察到截面，所以永遠不會添加設置了不透明度:1的類show。

<template>
  <section class="hidden">
    <h1>Title</h1>
    <p>Some text</p>
  </section>
  <section class="hidden">
    <h2>More text</h2>
  </section>
</template>

<style scoped>
* {
  background-color: 131313;
  padding: 0;
  margin: 0;
}

section {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
}
.hidden {
  opacity: 0;
  transition: all 1s;
}
.show {
  opacity: 1;
}
</style>

<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));
</script>

編輯:我應該注意到我使用的是Vue，我上面包含的代碼正是我的App.vue文件中所寫的。