Question

我想在我的 Streamlabs事件列表中添加延迟，以免破坏常规的Twitch警报。现在，它将在发生新警报时立即显示它们。网站上没有它的选项，所以我想我只能使用自定义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;
}
}

Answer 1

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

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

import winrt.windows.ui.notifications as notifications
import winrt.windows.data.xml.dom as dom

#create notifier
nManager = notifications.ToastNotificationManager
notifier = nManager.create_toast_notifier(r"C:\Users\andyy\AppData\Local\Programs\Python\Python37\python.exe")

#define your notification as 

tString = """
<toast>

    <visual>
        <binding template='ToastGeneric'>
            <text>Sample toast</text>
            <text>Sample content</text>
            <text>asdfasdadsfds</text>
        </binding>
    </visual>

    <actions>
        <input id="textBox" type="text" placeHolderContent="Type a reply"/>
        <action
            content="Send"
            arguments="action=reply&amp;convId=9318"
            activationType="background"
            hint-inputId="textBox"/>
    </actions>

</toast>
"""


#convert notification to an XmlDocument
xDoc = dom.XmlDocument()
xDoc.load_xml(tString)

#display notification
notifier.show(notifications.ToastNotification(xDoc))

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

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

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

1 个答案: