仅在 AJAX 查询返回某个结果时播放 CSS 动画答案

【问题标题】：Play CSS animation only when AJAX query returns a certain result仅在 AJAX 查询返回某个结果时播放 CSS 动画
【发布时间】：2016-09-19 07:08:31
【问题描述】：

我有一个显示警报计数的 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 已刷新。

【问题讨论】：

描述您希望人们如何受到关注

标签： javascript php jquery html css

【解决方案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>

【讨论】：

我希望脉冲或闪光只在使用此方法首次出现警报时发生一次，每次刷新 div 时都会播放动画。
when there’s a new alert 仅在页面加载时？！所以只使用一次函数。
对不起，我解释得不好，这是一个仪表板，将显示在一个大的办公室屏幕上并且不与之交互，因此动画需要在 div 首次变为红色时加载，div 将然后在警报消失后再次变为绿色，下次出现警报时，动画需要再次触发。所以每次 div 显示为红色时都需要调用一次......所有这些都不需要重新加载或更改页面。
好的。你有函数pulse。每当您想引起用户的注意时，只需调用此函数即可。如果您不需要更改计数器，只需将其从函数中删除即可。我完全不明白我的回答中缺少什么..

【解决方案2】：

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

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

setInterval(function() {
    $("#alertWrap").load(location.href+"#alertWrap>*", "", function(responseText, textStatus) {
        if (textStatus === "success" && responseContainsNewAlerts(responseText)) {
            flashElement($("#alertWrap"));
        }
    });
}, 5000);

function responseContainsNewAlerts(responseText) {
    return responseText.indexOf("redBackground") !== -1;
}

function flashElement($element) {
    var flashDelayMs = 200;
    var numFlashes = 2;
    for (var i=0; i < numFlashes; i++) {
        $element.fadeOut(flashDelayMs).fadeIn(flashDelayMs);
    }
}

【讨论】：

【解决方案3】：

您可以添加在刷新警报时运行的 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'});
   }

【讨论】：