Streamlabs 自定义 CSS 事件列表 - 为新条目添加延迟

Posted 2023-03-13

【中文标题】Streamlabs 自定义 CSS 事件列表 - 为新条目添加延迟

【英文标题】：Streamlabs Custom CSS Event List - Adding a delay for new entries

【发布时间】：2018-12-23 15:44:33

【问题描述】：

我想向我的 Streamlabs 事件列表添加延迟，这样它就不会破坏我的常规 Twitch 警报。现在，它会在新警报发生时立即显示它们。网站上没有它的选项，所以我想我只能用 Custom CSS 来做到这一点。

我基本上只是希望事件列表在我获得新的关注者、订阅者等时等待 30 秒，然后它才会开始显示在列表上。

这是我正在使用的 CSS 文件。它工作得很好，我只是不知道如何延迟它。

@import url("https://fonts.googleapis.com/css?family=$font_family");

html, .widget-EventList li > div 
transform: rotateX($rotate_x) rotateY($rotate_y);


.widget-EventList 
font-weight: 400;
font-size: $font_size;
font-family: "$font_family";
overflow: hidden;
color: #444;
list-style: none;
padding: 0;
text-transform: uppercase;
position: relative;
background: transparente;
transform: rotate(180deg);
height: 100%;
width: 100%;
margin: 0;
padding: 10px;


.widget-EventList, .widget-EventList * 
box-sizing: border-box;


.widget-EventList li 
transform: rotate(-180deg);
line-height: 1.3em;
overflow: hidden;
margin-bottom: 0.1em;


.widget-EventList li > div:last-child 
/*padding: 0 10px;*/
height: 1.3em;
overflow: hidden;
position: relative;
z-index: 10;
text-align: right;
display: inline-block;
float: right;
white-space: nowrap;


.widget-EventList .tag 
float: right;
margin: 0 0.25em;
display: inline-block;


.widget-EventList .message 
float: right;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 0.25em;
display: inline-block;


.widget-EventList li:first-child div:last-child 
background: #DCB154;
color: $text_color;


.widget-EventList li:nth-child(2) div:last-child 
color: #EEE;


.widget-EventList li:nth-child(3) div:last-child 
color: #AAA;


.widget-EventList li > div:last-child 
animation: grow 0.5s forwards;
-webkit-animation: grow 0.5s forwards;


.widget-EventList li:nth-child(n+ $max_events ) 
animation: fadeOut 1.5s forwards;
-webkit-animation: fadeOut 1.5s forwards;


@keyframes grow 
0% 
height: 0;
padding-top: 0;
padding-bottom: 0;



@-webkit-keyframes grow 
0% 
height: 0;
padding-top: 0;
padding-bottom: 0;

【参考方案1】：

我很欣赏这是一个相当古老的话题，但它没有得到 3,000 次观看，所以......

您想在 javascript 端而不是 CSS 端添加时间延迟。 改变这个：

document.addEventListener('onEventReceived', function(obj) 
  var listItems = document.querySelectorAll(".listItem");
  var listItemNew = listItems[0];
  SetListItem(listItemNew);
);

到这样的事情（这里的时间参数以毫秒为单位，并遵循setTimeout函数）：

document.addEventListener('onEventReceived', function(obj) 
  setTimeout(function()
    var listItems = document.querySelectorAll(".listItem");
    var listItemNew = listItems[0];
    SetListItem(listItemNew);
    
  , 10000);
);