无缝滚动动画技术方案

问题描述

在实现横向无缝滚动时，遇到了一个关键问题：当容器宽度超过100%时，传统的CSS百分比动画无法准确计算滚动距离，导致动画重置时机不正确。

技术方案

核心思路

无缝循环：使用两组镜像元素

实时宽度计算：使用 useElementSize 实时获取第一组元素的实际宽度（两组元素的宽度应该一致）

精确滚动距离：将元素实际宽度作为CSS变量传递给动画

技术实现

1. 模板结构

vue

2. 脚本逻辑

vue

3. CSS动画

            css
            
          
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-distance));
  }
}

.scroll-content {
  animation: scrollLeft linear infinite;
}