因为前阵子开发了一个 React 的 轮播功能,遇到了如果需要 文字动态,在Clone项目上需要重置时, 会导致动画无法连贯,所以就想说来看看目前的 Swiper 有没有这个问题。
於事,發現了他已經不使用 Clone 的方式了。
一般情況
可以看到,一般情况下,该方法类似于实现轮播的一般方法。
遇到需要 Clone 的情況
我们从aria-label
中的信息可以看出,active item
被移动到第一个位置,然后序列继续。 对于每一个动作,我们只需要激活 transition-duration
动画。 运动完成后,动画停用,运动控制应锁定,直到运动完成。
但实际上是
// active 5 (is last)
1 / 5 (-1496 * 0)
2 / 5 (-1496 * 1)
3 / 5 (-1496 * 2)
4 / 5 (-1496 * 3)
5 / 5 (-1496 * 4)
// click next, active 1
// then duration 0ms, transform: -4488px,
// then duration: 900ms, transform: -5984px,
// move
2 / 5 (0)
3 / 5 (-1496px)
4 / 5 (-2992px)
5 / 5 (-4488px)
1 / 5 (-5984px)
// then duration 0ms
// click next, active 2
// then duration 0ms, transform: -4488px,
// then duration: 900ms, transform: -5984px,
3 / 5 (0)
4 / 5 (-1496px)
5 / 5 (-2992px)
1 / 5 (-4488px)
2 / 5 (-5984px)
// then duration 0ms
因为速度太快看不出破绽,下面是大概的重现方式
containerEl.style.transform = `translate3d(${-1904}px, 0px, 0px)`;
containerEl.style.transitionDuration = '0ms';
setTimeout(() => {
containerEl.style.transform = `translate3d(${-3808}px, 0px, 0px)`;
containerEl.style.transitionDuration = `${this._configurator.setting.moveTime}ms`;
}, 0);
于是补上将下一个目标序列移动到最后一个,然后跳转到上一个位置,再移动到最后一个 排序变了,就变成了判断是最后还是第一个,按顺序判断
可以解决什么问题
我本来以为要循环,必须复制然后立即替换和重置。 通过这样做,我们可以避免与额外复制相关的问题以及轮播项目不同的情况。 每次都需要创建新轮播项目(依照需要复制的数量)。通常是轮播项目中有动态效果时比较容易受到影响
会产生什么问题
-
因为改变数组顺序需要重新渲染 (值得思考的是,如果真的改变了数组的顺序,可以考虑是否使用css order来达到同样的效果)
-
当数量无法整除移動群数时,当数量无法整除移动群数时,顺序切换补间会出现破绽
-
手动滑动的时候,或者数量不够的时候,很难判断切换顺序是依照 开头还是结尾
-
第一页指定移动到最后一页的时候,很難瞬間在 動畫移動中切換順序(除非使用 requestAnimationFrame)
到目前为止,使用克隆可能仍然是利大于弊。
替代方案
如果你觉得目前的 swiper 过于复杂,或是 你的需求会产生奇怪的现象,你可以考虑这个库,Loop 模式是使用 Clone 模式
说明文档 bear-react-carousel.github.io/docs/why
如果有帮助到你,在帮忙给的 Star 支持,感谢 :)
如果有其他建议,也欢迎交流