使用 CSS/JavaScript 安排动画？

Question

我们有一个 Web 应用程序，它需要以某种顺序在页面上显示来自服务器的消息。可以使用 JavaScript 一次性下载所有消息，但它们只能在预定时间显示。例如，如果有三个消息：

[
  { "content": "foo", "offset": 1 },
  { "content": "bar", "offset": 2 },
  { "content": "poi", "offset": 3 }
]

它们应该从页面加载的那一刻起在 1s、2s 和 3s 出现在页面上，并且它们中的每一个都应该在以某种方式在页面上进行动画处理后从页面上消失（独立于其他）。

我的问题是：

1. 是使用 JavaScript 在页面中动态添加/删除消息元素，还是一次性将所有消息添加到页面（起初隐藏）并使用 CSS 动画延迟控制自己的外表？可能有 很多 条消息（例如 10000 条）。

2. 对于您认为合适的方式（CSS/JavaScript），您能否就如何实现它提供一些建议？我是后端开发人员，所以我不确定该怎么做。一些方向或想法表示赞赏。

Answer 1

每次只有一个元素的内容会刷新，而不是 10000 个隐藏的元素逐渐显露出来。

在 JQuery 中，你可以这样做：

//when you get your messages from the server:

var messageQueue = [
    { "content": "foo", "offset": 1 },
    { "content": "bar", "offset": 2 },
    { "content": "poi", "offset": 3 }
  ]

//identify where you want to put the message, i.e. $('body'), or some div

var target = $(wherever you want to print the message)

//loop through the message queue giving each an offset

var delay = 1000; //this is 1s but you can make it anything you want
$.each(messageQueue, function(i, v) {
    setTimeout(function() {
        throwAcrossScreen(v.content); 
   }, v.offset * delay);
});

//create a temporary container for the message then fling it across the screen
//the element will be destroyed once it reaches the far side of the screen
//and the new message will appear at that moment

function throwAcrossScreen(message) {
    var div = $('<div/>', {html: message})
               .css({position: 'fixed', left: '0%'})
               .appendTo(target)
               .animate({left: '100%'}, 5000, function() {
                   div.remove()
               });
};

这是一个jsfiddle 展示它的实际应用。

或者，用 CSS3 动画替换最后一部分：

function throwAcrossScreen(message) {
    var div = $('<div/>', {html: message})
               .addClass('message')
               .appendTo(target)
               .css({'left': '100%'});
    setTimeout(function() {
                   div.remove()
               }, 5000);
};

并且在你的 CSS 文件中有：

.message {
    position: 'fixed';
    left: '0%';
    -webkit-transition: left 5s;
    -moz-transition: left 5s;
    -o-transition: left 5s;
    -ms-transition: left 5s;
    transition: left 5s;
}

虽然，this answer 提出了一种性能更好的替代方案。