我正在使用 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;
}
最佳答案
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;
}
关于jquery - CSS3 动画不适用于 jQuery 数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55123310/