javascript - 将闪烁动画添加到 html 单元格边框

Question

有什么方法可以为这个 css 更改添加动画吗？在最后一个 if 语句中，我希望边框变为粉红色并闪烁？

CSS:

table, td, th {
    border: 1px solid black;    
    cellpadding: 5;
    cellspacing: 5;
    text-align: center; 
    vertical-align: middle;
    font-size: 40px;
    background-color: #8F8F8F;
}

JavaScript:

if (item.delivery_avg <= 10.00) {
    return $(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
} else if (item.delivery_avg >= 10.01 && item.delivery_avg <= 20.00) {
    return $(`td.${item.beacon}`).css({'border-color':'orange', 'border-width':'thick' }).toggleClass('coloured');
} else if (item.delivery_avg >= 20.01 && item.delivery_avg <= 30.00) {
    return $(`td.${item.beacon}`).css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
}

Answer 1

您始终可以使用基于 CSS 的动画。

td.flash{
    animation: pulse 1s infinite;
}

@-webkit-keyframes pulse {
    from, to { box-shadow: 0 0 0 0 red;}
    50% { box-shadow: 0 0 0 4px red; }
}

table, td, th {
  border: 1px solid black;    
  text-align: center; 
  vertical-align: middle;
  font-size: 40px;
  background-color: #8F8F8F;
}

<table>
    <tr>
        <td>One</td>
        <td class="flash">Two, flashing</td>
        <td>Three</td>
    </tr>
</table>