JavaScript Logo跑马灯动画translateX属性值无效报错问题

两个核心问题引发报错和动画异常：

• 模板字符串语法使用错误：translateX(-${translateValue}px)外层用了单引号包裹，JS仅会解析反引号（）包裹内容中的${}插值语法，单引号场景下${translateValue}`会被识别为普通文本，最终传给浏览器的transform值是不符合CSS规范的字面量，直接触发无效属性报错。
• 宽度计算+代码结构问题：遍历累加item的clientWidth时，不会计算列表项的外边距，得到的总宽度和实际渲染宽度有偏差；同时原代码末尾DOMContentLoaded的回调闭合括号位置错误，会引发脚本执行异常。硬编码固定偏移值时，偏移距离和实际单组列表宽度不匹配，动画循环到重置节点必然出现跳帧。

1. 将关键帧中transform属性值的外层单引号替换为反引号，保证插值逻辑正常计算
2. 优化宽度计算逻辑：在复制列表内容前先获取原始列表的scrollWidth值，这个值是单组列表的真实渲染总宽度（包含内容、内边距、溢出尺寸，不会漏算项之间的间距），直接用这个值作为偏移量即可实现无缝循环，不需要遍历累加单项宽度
3. 修正代码括号闭合位置，补全匀速动画配置，避免动画速度变化导致的视觉卡顿

window.addEventListener('DOMContentLoaded', () => {
  const initSlider = () => {
    const list = document.querySelector('#brands-slider-{{ section.id }} .brands-slider-list')
    if (!list) return
    // 未复制内容前先取原始单组列表的真实宽度
    const singleScrollWidth = list.scrollWidth
    const originalListHTML = list.innerHTML
    // 仅需复制1份列表内容即可满足无缝循环需求，减少冗余DOM
    list.insertAdjacentHTML('beforeend', originalListHTML)
    const originalItemCount = list.querySelectorAll('.brands-slider-item').length / 2

    // 为复制出的冗余项添加无障碍隐藏标记
    list.querySelectorAll('.brands-slider-item').forEach((item, index) => {
      if (index >= originalItemCount) {
        item.setAttribute('aria-hidden', 'true')
      }
    })

    const scrollAnimation = list.animate(
      [
        { transform: 'translateX(0)' },
        // 反引号包裹模板字符串，插值正常计算
        { transform: `translateX(-${singleScrollWidth}px)` }
      ],
      {
        duration: {{ section.settings.animation_duration | times:1000 }},
        iterations: Infinity,
        easing: 'linear', // 配置匀速运动，避免缓动带来的卡顿感
        fill: 'forwards'
      }
    )
  
    list.addEventListener("mouseover", () => scrollAnimation.pause())
    list.addEventListener("mouseleave", () => scrollAnimation.play())
  }

  initSlider()

  document.addEventListener('shopify:section:load', (e) => {
    if (e.target.querySelector('#brands-slider-{{ section.id }}')) {
      initSlider()
    }
  })
})

补充说明：原代码中两次插入列表innerHTML生成4组内容的逻辑没有必要，仅需复制1份生成2组完全相同的内容，配合单组宽度的偏移量，即可实现无感知无缝循环，冗余DOM会增加页面渲染负担。

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