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 国际许可协议 进行许可,请在转载时注明出处及本声明!