你好，我正在尝试使用IntersectionObserver使滚动部分具有动画效果。为了做到这一点，我尝试使用JavaScript
css代码：

.hidden{
  opacity: 0;
  filter:blur(5px);
      transform: translateX(-100%);
  transition: all 1s;

}
.show {
  opacity: 1;
  filter:blur(0px);
  transform: translateX(0);
}

js的代码

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));

html的代码：

<section class="hidden"> <h1> heading </h1> </section>

在html中链接所有文件后，我的类隐藏部分保持隐藏并且不改变显示
错误信息：

animater.js:5 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at animater.js:5:36
    at Array.forEach (<anonymous>)
    at IntersectionObserver.<anonymous> (animater.js:

2点13分）
我希望我的代码将html中带有类hidden的部分更改为类show，以便它们在滚动页面/查看该部分时具有动画效果。目前代码给了我上述指定的错误，带有类hidden的部分仍保留其隐藏类。