Я использую 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», чтобы увидеть, что здесь происходит.
Зачем курорт будет сбрасывать всю анимацию для предыдущей анимированной ячейки? Есть ли способ избежать этого?
Обновление:
Я только что обнаружил, что jQuery.animate
отлично работает с таблицей сортировки, не уверен, почему не работает подход CSS