jquery - CSS3 动画不适用于 jQuery 数据表

Question

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

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

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

我错过了什么？

JS

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

Answer 1

Watching from Chrome's inspector, I can see that the class is being added but it just doesn't appear to be doing anything.

鉴于此行为，您的 .alert-highlight 类可能不够具体，无法覆盖数据表的默认样式。

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

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