最近需要做一个顶部的滚动栏。内容向上滚动。
像这样的
大概的原理，是让整个列表的margin-top从0再不断的减小，直到第一条通知完全离开可视范围，将第一条通知插入到列表的最后。同时把margin-top又变回0。
示意图
最开始想到的方式是设置一个定时器不断减小margin-top，但又想了下有没有使用css的方案呢。
于是现在的方案是利用transition实现滚动的过渡动画。
先来说下transition，设置 transition: margin-top 2s，然后当margin-top的值改变时就会添加一个过渡动画。比如margin-top最开始是0，设置为-20px的时候，不是直接一下变到-20px的状态，而是有一个上移的过度。
所以我们最开始设置margin-top:0，然后设置一个setInterval，间隔一段时间后（这段时间不滚动），再设置margin-top:-20px（每行的高度）。接着将第一条通知插入到列表的最后。同时把margin-top又变回0。
但这个时候就出现一个问题，从-20px到0也有会有过渡动画，所以要在设置margin-top:-20px的时候同时移除transition属性（可以移除包含transition这个的class）
为了减少页面重绘重排，可以把margin-top换成transform:translateY(-20px)。其他的都一样。
网友评论