1.怎么循环滚动

在子元素上添加循环动画，一直向左移动距离为-100%

@keyframes animate {
  100% {
    transform: translateX(-100%);
  }
}

子组件上绑定动画事件：动画重新播放时触发，animationiteration，事件中获取父元素的宽度，子元素向右偏移该距离，这样后面的滚动，就是从右侧进入。

// 动画结束 从右侧进入
function animationiteration() {
  divStyle.value["transform"] = `translateX(${parentWidth.value}px)`;
}

2.子元素内容不固定，怎么平滑滚动

• 解决这个问题的关键就是，动画的持续时间不能固定，此时的速度应该为速率，每秒滚动多少px，我们拿内容的宽度除以固定的速率，这样就得到了每个内容的动画时间，保证了平滑滚动。
• 在循环滚动中，因为我们手动使子元素向右偏移了距离，这样，子元素第一次动画距离是自身的宽度，后续动画是我们偏移的距离加上自身的宽度，因此在动画开始时 动画时间为 子元素自身宽度除以速率，后续动画既animationiteration事件中为 （自身宽度+偏移距离）除以速率

// 动画开始
animateTime.value = boxDiv.value.offsetWidth / Number(props.formData.acrossSpeed);

function animationiteration() {
  divStyle.value["transform"] = `translateX(${parentWidth.value}px)`;
  animateTime.value = (boxDiv.value.offsetWidth + parentWidth.value) / Number(props.formData.acrossSpeed);
}

版权属于：小小窝/禾下月

本文链接：https://hxyxyz.top/index.php/Web/355.html

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！