无法添加 CSS 动画来列出 touchstart 事件上的项目

Question

当检测到触摸启动事件时，我会发生一些简单的 CSS 动画，但是在尝试将类添加到 div 元素时，不断出现“未定义不是对象”。请在移动设备上检查此项，因为它是通过触摸事件激活的。我想向 div 内的所有 li 项目添加一个具有新值的类。在添加类之前我尝试控制台记录每个列表项并在控制台中打印。这非常简单，但我不明白为什么只有在添加类时才会出现此错误。动画的 CSS 只需要出现在移动设备上，因此我在媒体查询中添加了这些新类。

这是工作网站。

container.addEventListener('touchstart', handlePanStart, false);

function handlePanStart() {
  const target = document.querySelectorAll('.top')
  let yOffset = window.pageYOffset;
  console.log('start', 'ypos: ' + yOffset)

  target.forEach((item) => {
    console.log(item.classList)
    item.classlist.add('longer')

  })
}

ul {
  height: 50vh;
  flex-direction: column;
  transform: translateY(0);
}

.top {
  height: 5px;
  width: 95vw;
  transition: all 2s ease-out;
}

.top img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid black;
  pointer-events: none;
}

.longer {
  height: 205px;
}

<ul>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
  <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
</ul>

Answer 1

将 classlist 更改为 classList （驼峰式大小写）。 classlist 在 DOM 中未定义。