无法将 CSS 动画添加到触摸启动事件的列表项

Question

当检测到触摸启动事件时，我有一些简单的CSS动画要发生，但不断得到"；undefined不是对象"；当尝试将类添加到div元素时。请在手机上检查，因为它是通过触摸事件激活的。我想在div中的所有li项中添加一个具有新值的类。在添加该类之前，我尝试在控制台中记录每个列表项，并在控制台中打印fine。这很简单，但我不明白为什么只有在添加类时才会出现这个错误。动画的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中未定义。