使用 CSS/JavaScript 安排动画？

Posted 2023-03-06

【中文标题】使用 CSS/JavaScript 安排动画？

【英文标题】：Schedule animations with CSS/JavaScript?

【发布时间】：2016-06-30 08:01:50

【问题描述】：

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

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

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

我的问题是：

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

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

【问题讨论】：

我认为 css/javascript 都足以解决您的问题，但它们都有一些好处。我通常在静态项目上使用 css 动画。但在你的主题上，我认为你还没有修复offset 的比例，所以我推荐你的 javascript

@shayanypn 如果页面上有很多隐藏元素，会不会影响性能？

当您说“页面上的动画”时，您只是指打印吗？

@BarthesSimpson 我的意思是 CSS 动画。就像被扔到屏幕上一样。

如果您的页面变大，网页性能会降低。所以使用太多的图像、jquery 库、字体和.. 会降低你的性能，但是简单的 html 标签和文本，没有

【参考方案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 提出了一种性能更好的替代方案。

【讨论】：

感谢您的回答！我关心的一件事是动画每个消息元素对性能的影响，另一件事是 JS 与 CSS 的动画性能（我们的目标是桌面和移动客户端，因此性能和能耗是大问题）。你认为使用纯 CSS 动画可以改善这一点吗？我不知道这是否可行，但我正在考虑在页面上添加一批设置了动画延迟的消息，或类似的东西。

似乎有专门的 JavaScript 库（GSAP、Velocity.js 等）可能会有所帮助...？

也许，虽然这些是非常轻量级的动画。如果您愿意，可以使用 CSS3 过渡。我会更新答案。