javascript - 仅在 AJAX 查询返回特定结果时播放 CSS 动画

Question

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

我目前有这样的东西:

<script>
    setInterval(function() {
        $("#alertWrap").load(location.href + "#alertWrap>*","");                    
    }, 5000);
</script>   

<div class="alertWrap" id="alertWrap">
    <?php
        $alertcountCheckQ = mysql_query("SELECT COUNT(alert_status)numerOfAlerts FROM alerts WHERE alert_status = 'unacknowledged'");
        $alertcountCheckR = mysql_fetch_object($alertcountCheckQ);

        if ($alertcountCheckR->numerOfAlerts >= 1) {
            echo "<div class=\"alertContentContainer redBackground\">$alertcountCheckR->numerOfAlerts new alert(s)</div>";
        } else {
            echo "<div class=\"alertContentContainer greenBackground\">Currently no new alerts</div>";
        }
    ?>
</div>

我想在出现新警报时将 CSS 动画应用于 div 的内容 - 可能会出现闪光以引起人们的注意 - 但是，如果每次都触发动画，我无法弄清楚如何做到这一点div 已刷新。

Answer 1

你可以用 css3 动画做这样的事情(等待 2 秒的效果)。您只需要调用添加类 .pulse 的函数并在 4 秒后将其删除:

注意 我只向您展示脉冲效应，而不是逻辑，因为我认为您可以处理它。该演示仅向您展示了在您知道需要引起用户注意后执行的操作。

setTimeout(function() {
  pulse(1);
}, 2000);

function pulse(counter) {
  $('#total').html(counter);
  $('.alerts').addClass('pulse');  
  setTimeout(function() {
    $('.alerts').removeClass('pulse');  
  }, 4000);
}

.alerts {
  margin:50px;
  display:inline-block;
}

.pulse {
  outline: rgba(191, 28, 86, 1) solid 2px;
  animation:pulse 1s ease infinite;
}

@keyframes pulse {
  0% {
    outline-offset:0;
    opacity:1;
  }
  
  100% {
    outline-offset:10px;
    outline-color:rgba(191, 28, 86, 0)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="alerts">
  <span id="total">0</span> alerts
</span>