CSS3动画不使用jQuery数据表

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

如果禁用Datatables，动画工作正常。更奇怪的是，如果我将背景动画更改为彩色动画，它也可以工作

从Chrome的检查器上看，我可以看到该类正在被添加，但它似乎什么都没有做

我错过了什么

JS

从Chrome的inspector上看，我可以看到该类正在被添加，但它似乎什么都没有做

鉴于这种行为，您的

.alert highlight

类似乎不够具体，无法覆盖Datatable的默认样式

要解决这个问题，您需要使规则更加具体。例如，类似这样的事情：

#容器表#foo.data td.alert-highlight{
-webkit动画：黄色淡入2秒轻松1；
动画：黄色淡入淡出2秒1；
}

检查DOM检查器中的元素。您的

.alert highlight

的优先级可能不够高，无法覆盖现有的数据表styling@RoryMcCrossan-我该怎么处理？我尝试添加

！重要信息

，但它不起作用。如果发生这种情况，则需要使选择器比DataTables添加的选择器更具体。这是假设这就是问题所在，您需要确认。@RoryMcCrossan-Hmm。。。关于具体性，你可能是对的。我排除了这种可能性，因为

！重要提示

不起作用，但如果我将延迟设置得足够长，以取消选中来自引导的一些背景样式，它看起来就起作用了。做更多的测试…人们更加相信

！比它应得的重要

。这是你不应该真正使用的最后手段。如果你能为这个问题添加一个有效的例子，我很乐意帮助你诊断

$('#<%=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);

@-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;
}