CSS3 动画不适用于 jQuery 数据表答案

【问题标题】：CSS3 animation not working with jQuery DatatablesCSS3 动画不适用于 jQuery 数据表
【发布时间】：2019-03-12 13:59:50
【问题描述】：

我正在使用Datatables 来格式化表格。我设置了一个 CSS3 动画，以便在延迟后向表格中的一行添加高亮，但它不起作用。

如果我禁用数据表，动画效果很好。更奇怪的是，如果我把背景动画改成彩色动画，也是可以的。

从 Chrome 的检查器中观察，我可以看到正在添加该类，但它似乎没有做任何事情......

我错过了什么？

$('#<%=gvMyGrid.ClientID%>').dataTable({
    "order": [[1, 'desc']],
    "columnDefs": [
        { "orderable": false, "targets": oIndex }, //disable sorting on the "edit" column
        { "type": "date", "targets": parseInt($('#<%=hfDateColumnNum.ClientID%>').val()) },
        { "visible": false, "targets": 4 }
    ]
});

setTimeout(function () {
    var alertRow = document.getElementsByClassName('alert-target')[0];

    alertRow.scrollIntoView();
    alertRow.classList.add('alert-highlight');
}, 3000);

CSS

@-webkit-keyframes yellow-fade {
    0% {
        background: yellow;
    }

    100% {
        background: none;
    }
}

@keyframes yellow-fade {
    0% {
        background: yellow;
    }

    100% {
        background: none;
    }
}

.alert-highlight {
    -webkit-animation: yellow-fade 2s ease-in 1;
    animation: yellow-fade 2s ease-in 1;
}

【问题讨论】：

检查 DOM 检查器中的元素。您的 .alert-highlight 的优先级可能不够高，无法覆盖现有的 Datatables 样式
@RoryMcCrossan - 我该如何解决这个问题？我尝试将!important 添加到样式中，但没有成功。
如果发生这种情况，您需要使选择器比 DataTables 添加的选择器更具体。这是假设这是您需要确认的问题。
@RoryMcCrossan - 嗯......你可能是对的特异性。我排除了这种可能性，因为!important 不起作用，但是如果我将延迟设置得足够长以取消选中来自 Bootstrap 的一些背景样式，它看起来就可以了。进行更多测试...
人们对!important 的信任度超出了应有的水平。这是你永远不应该真正使用的最后手段。如果您可以将问题的工作示例添加到问题中，我很乐意帮助您诊断它

标签： jquery css datatables css-animations

【解决方案1】：

从 Chrome 的检查器中观察，我可以看到正在添加该类，但它似乎没有做任何事情。

鉴于这种行为，您的 .alert-highlight 类可能不够具体，无法覆盖 Datatable 的默认样式。

要解决此问题，您需要使规则更加具体。像这样的东西，例如：

#container table#foo .data td.alert-highlight {
  -webkit-animation: yellow-fade 2s ease-in 1;
  animation: yellow-fade 2s ease-in 1;
}

【讨论】：