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>

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

1 个答案: