Javascript 仅当AJAX查询返回特定结果时播放CSS动画

我有一个显示警报计数的div。目前，div是通过jQuery脚本更新的，每五秒钟刷新一次并显示计数。如果计数为零，div将显示消息“当前无新警报”并显示为绿色，而如果有1个或多个警报，div将显示为红色并显示警报数量

我现在有这样的东西：

setInterval（函数（）{
$（“#alertWrap”）.load（location.href+“#alertWrap>*”，“”）；
}, 5000);
您可以使用css3动画执行类似操作（等待2秒以获得效果）。您只需调用添加类
.pulse
的函数，并在4秒钟后将其删除：

注意我只向您展示脉冲效应，而不是逻辑，因为我认为您可以处理它。演示仅显示在您知道需要引起用户注意后所做的事情


setTimeout（函数（）{
脉冲（1）；
}, 2000);
功能脉冲（计数器）{
$（'#total'）.html（计数器）；
$（'.alerts'）.addClass（'pulse'）；
setTimeout（函数（）{
$（'.alerts'）.removeClass（'pulse'）；
}, 4000);
}
。警报{
利润率：50像素；
显示：内联块；
}
.脉搏{
轮廓：rgba（191,28,86,1）固体2px；
动画：脉冲1s轻松无限；
}
@关键帧脉冲{
0% {
轮廓偏移：0；
不透明度：1；
}
100% {
轮廓偏移：10px；
轮廓颜色：rgba（191,28,86,0）
}
}

0警报
您可以提供回调函数作为的第三个参数。该函数将在尝试从服务器加载新内容后运行。在该函数中，如果新警报状态已成功加载，请使用第一个参数
responseText
检查加载的内容。如果内容有新警报，请运行动画

下面的示例代码不使用CSS动画，而是使用jQuery函数和flash两次。但是您可以定制
flashElement
来做任何您想做的事情，例如向该元素添加一个类，其中已经有CSS来使用该类使元素闪烁

setInterval（函数（）{
$（“#alertWrap”）.load（location.href+“#alertWrap>*”，“”函数（responseText，textStatus）{
if（textStatus==“success”&&responseContainsNewAlerts（responseText））{
flashElement（$（“#alertWrap”）；
}
});
}, 5000);
函数responseContainesnewalerts（responseText）{
返回responseText.indexOf（“redBackground”）！=-1；
}
函数（$element）{
var flashDelayMs=200；
var numFlashes=2；
对于（变量i=0；i
您可以添加Jquery代码，在刷新警报时运行该代码，并在有新警报时将警报的CSS更改为动画，如果没有，则删除CSS动画

if (thereIsANewAlert){
  $(".alertContentContainer redBackground").css("animation-name","example");
  $(".alertContentContainer redBackground").css("animation-duration","4s");
}else{
  $(".alertContentContainer redBackground").css("animation-name","");
  $(".alertContentContainer redBackground").css("animation-duration","");
}  

但是，我建议只通过Jquery设置动画，如下示例：

   if (thereIsANewAlert){
      $(".alertContentContainer redBackground").animate({left: '100px'});
   }

描述您希望人们注意到的方式我希望脉冲或闪光仅在警报首次出现时发生一次使用此方法每次刷新div时都会播放动画。
出现新警报时
仅在页面加载时？！所以只使用一次这个功能。对不起，我没有解释好，这是一个仪表板，将显示在一个大的办公室屏幕上，没有得到互动，所以动画需要加载时，div第一次变成红色，警报解除后，div将再次变为绿色，下次出现警报时，动画需要再次触发。所以每次div显示为红色时都需要调用一次。。。无需重新加载或更改页面。然后确定。您有功能
脉冲
。只要你想引起用户的注意，只要调用这个函数。如果不需要更改计数器，只需将其从函数中删除即可。我不明白我的回答中缺少了什么。。