解决水平循环滚动几个难点

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);
}
hxy

hxy

秦 夏

留下你的评论

快留下你的小秘密吧