实现原理:
1.采用css3 实现 滚动效果(过渡动画)
2.采用 dom 事件监听 监听 过度动画
3.无缝原理
假如有 [a, b, c] 三个切换页面,当页面滚动到c时,直接切回a 会出现 :
第一种情况: 会出现 c->b->a 回滚
第二种情况: 到c后 ,顺切到 a 会出现闪屏效果
所以,我采用 把页面变成 [c', a, b, c, a'] 这种形式 ,从 a开始 滚, 滚到c后,继续滚到 a',
滚到a‘后瞬间,把页面切到 a,因为 a 和 a’ 一样 所以 不会出现 闪屏效果。 反方向原理一样。
代码效果地址
代码如下:
布局:
js: