无限轮播轨道动画中使用Element.prepend出现DOM排序异常问题

这个DOM排序异常是lastChild匹配到空白文本节点导致的：

• 你HTML代码中.slider-track标签内部存在换行和缩进，浏览器会自动将这些空白内容解析为一个隐藏的文本节点，加上你后续插入的10个卡片，.slider-track总共有11个子节点。
• 前10次animationiteration事件触发时，lastChild刚好匹配到的都是卡片节点，逻辑运行符合预期。
• 第10次操作完成后，空白文本节点被挤到了子节点列表的最后一位，第11次触发时lastChild拿到的是这个不可见的空白节点，将它移到最前面的操作不会改变卡片的排序，视觉上就会表现为「Card1被连续两次选中执行prepend」。

把事件监听逻辑中的lastChild替换为lastElementChild即可，lastElementChild只会匹配元素类型的子节点，会自动忽略空白文本、注释等非元素节点：

sliderTrack.addEventListener('animationiteration', () => {
  sliderTrack.prepend(sliderTrack.lastElementChild);
});

如果要从根源规避这类问题，也可以在初始化时主动清空.slider-track的所有子节点，提前移除空白文本节点：

const sliderTrack = document.querySelector(".slider-track")
// 初始化清空所有子节点
sliderTrack.innerHTML = ''

内容的提问来源于stack exchange，提问作者minnow