CODEWITHSUNDEEP
jquerycssdatatablescss-animations
TheIronCheek
TheIronCheek

Reputation: 1149

CSS3 animation not working with jQuery Datatables

I'm using Datatables to format a table. I have a CSS3 animation set up to add a highlight to a row in the table after a delay but it doesn't work.

If I disable Datatables, the animation works fine. Even stranger, if I change the background animation into a color animation, it also works.

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

What am I missing?

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

Upvotes: 1

Views: 338

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

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

Given this behaviour it sounds likely that your .alert-highlight class is not specific enough to override the default styling of the Datatable.

To fix this you need to make the rule more specific. Something like this, for example:

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

Upvotes: 1

Related Questions