CSS3-анимация не работает с jQuery Datatables - PullRequest
Новая
       15

CSS3-анимация не работает с jQuery Datatables

1 голос
/ 12 марта 2019

Я использую Datatables для форматирования таблицы.У меня настроена анимация CSS3 для добавления выделения в строку в таблице после задержки, но она не работает.

Если я отключаю Datatables, анимация работает нормально.Даже более странно, если я изменю фоновую анимацию на цветную анимацию, она также работает.

Наблюдая из инспектора 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;
}

1 Ответ

1 голос
/ 12 марта 2019

Наблюдая за инспектором Chrome, я вижу, что класс добавляется, но, похоже, он ничего не делает.

При таком поведении кажется вероятным, что ваш *Класс 1005 * недостаточно конкретен, чтобы переопределить стиль по умолчанию для Datatable.

Чтобы исправить это, необходимо сделать правило более конкретным.Примерно так, например: 

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