无法将 CSS 动画添加到 touchstart 事件的列表项

Question

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

这是working website。

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 (camel-case)。 classlist 在 DOM 中未定义。

无法将 CSS 动画添加到 touchstart 事件的列表项

Can't add CSS animation to list items on touchstart event

javascript

css

touch-event

css-animations