Почему анимация CSS строки таблиц сбрасывается всякий раз, когда это происходит? - PullRequest
0 голосов
/ 04 мая 2018

Я использую tableorter 2 для создания сортируемой таблицы. Поскольку у меня есть некоторые данные, поступающие с внутреннего сервера, я хочу выделить изменения, поэтому я создал CSS-анимацию, подобную этой

@keyframes highlightfade {
  from { background: #0081FF; }
  to { background: transparent; }
}

.highlight {
  animation: highlightfade 5s;
}

Затем, когда данные поступают, я добавляю класс подсветки в ячейку

$(this).addClass('highlight');

Также вызвать сортировку

$("table").trigger("updateCell",[this, resort, callback]);

Анимация и сортировка работают, за исключением того, что будет сброшена вся анимация предыдущей анимированной ячейки. Вот демонстрационный код

https://jsfiddle.net/r4vse9f0/1/

Вы можете нажать на ячейку столбца «total», чтобы увидеть, что здесь происходит.

enter image description here

Зачем курорт будет сбрасывать всю анимацию для предыдущей анимированной ячейки? Есть ли способ избежать этого?

Обновление:

Я только что обнаружил, что jQuery.animate отлично работает с таблицей сортировки, не уверен, почему не работает подход CSS

...