一个JS问题

Question

一个列表的滚动,一共40个li,前后20个完全一样,后20个是为了无缝衔接(实际只需要10个~ 我是直接cloneNode,这个不重要~),每个高70px,3s滚动一次(demo里是1s一次),滚完20个归位(margin-top:0),但这个归位是不要动画的.

现在的情况是到19个时,直接归位了,少了一步动作.
昨天我问了相似的问题,并得到了解答.但是我今天用同样的方法却不行,何解?这是昨天的问题

---

写的有点乱. 大家可以看这里

Answer 1

补充：如果是要动画过度流畅的话不建议使用setTimeout，因为各浏览器的性能不同，延迟时间难以统一。
重点在于重置margin-top的时候没有transition的效果，即取消浏览器对transition的缓存。

scroll:function(){
  
    if (this._mt == -1400 ){
        this._mt =0;
        this.container.style.cssText = "";
        // 黑科技，通过获取container的位置属性来清除对样式的缓存。
        this.container.offsetHeight;
    }

    this._mt += -70;
    var str = "margin-top:"+this._mt +"px;" + "transition-property:margin-top;transition-duration:1s;transition-timing-function:linear";
    this.container.style.cssText = str;

}

---

你在scroll里先把this._mt自减了70，所以起点不是0而是－70，在－1400的时候重置，当然只有19个。
重置条件改成this._mt == -1470就有20个了。

Answer 2

原因是当你转了一圈之后，你把动画去掉了，它自然就停在哪里，等下一秒再把动画加上时再继续。

this._mt += -70;
if(this._mt < -1400){
    this._mt = 0;
    this.container.style.cssText = "";
    setTimeout.call(this,(function(){
        this._mt = -70;
        var str = "margin-top:"+ -70 +"px;" + "transition-property:margin-top;transition-duration:1s;transition-timing-function:linear";
        this.container.style.cssText = str;
   }),10)
 } else {
    var str = "margin-top:"+this._mt +"px;" + "transition-property:margin-top;transition-duration:1s;transition-timing-function:linear";

    this.container.style.cssText = str;
 }

延时的10ms可以加上一些，调到感觉自然并且不会跳变就可以了。