小程序可以实现仿直播滚动评论吗？

Question

如上图 这边需求是 最上面的评论会有淡出效果
css3 translate3D可以实现滚动 但是淡出效果不知道怎么实现。。。
求告知 思路

Answer 1

opacity属性和transition属性配合可以实现淡出效果

Answer 2

淡入淡出效果，应该不是弹幕本身的属性，应该是上下两个边缘都遮着一层半透明的蒙版

---

另外往上滚动用translate3D 可能也不大合适，这应该是一个scroll的行为，因为想抖音快手类似的直播平台，都可以往下滑看历史弹幕，

用 scroll 的话，好像只能用js动画，可以考虑实现一个类似jquery的功能 $('xxx').animate(scrollTop)

该功能可以考虑将滚动距离分成若干份，然后用 window.requestAnimationFrame(callback) 递归执行，callback 即执行scrollTo(若干份中的一份)

---

下面是一个animate函数的实现参考

/**
 * 
 * @param domEl 需要执行scroll的dom元素
 * @param top 滚动到的位置
 * @param time 滚动所需要的时间
 */
export default function animateScroll(domEl: HTMLElement, distance: number, time: number) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback) {
            return setTimeout(callback, 16);
        };
    }
    // 滚动step方法
    var step = function () {
        // 每一步滚动的距离
        const part = distance / time / 16;
        if (Math.abs(part) < 1) {
            domEl.scrollTo(0, distance);
        } else {
            domEl.scrollTo(0, part);
            requestAnimationFrame(step);
        }
    };
    step();
};