css - 使用 CSS3 缓和数十个 div 的最有效方法

Question

我每秒添加十个 div，每个都有一个图像，我希望它们从左侧滑入。这对于 javascript 来说是太密集的工作，对于关键帧来说也太多了。

那么什么是最有效的（CPU/内存方面，也考虑到移动设备）这样做的方式是什么？

谢谢。

Answer 1

您可以使用 JS 使用 setInterval 向它们添加一个类，然后对该类使用 CSS 转换吗？

Answer 2

使用jQuery Transit 之类的框架可以轻松完成此任务。这个框架的伟大之处在于它在移动设备上运行良好（在合理范围内），并尽可能使用浏览器的硬件加速功能。

JS 小提琴示例

Javascript：

$(document).ready(function () {

    showDiv($('div:first'), 90);

    function showDiv(div, pixels) {
        div.transition({
            opacity: 1,
            left: pixels + '%'
        }, 1000, 'out', function () {
            //call back
            showDiv(div.next("div"), pixels - 10);
        });
    }
});

无论如何，这不是一个完美的例子，但它应该引导你朝着正确的方向前进。

那些生活在边缘的人的疯狂模式。