У меня есть список элементов в таблице. Я хотел бы, чтобы строка элемента ненадолго мигала с подсветкой из-за некоторых внешних событий.
У меня есть CSS-анимация fadingHighlight для достижения желаемого визуального эффекта, и когда событие приходит, я устанавливаю последний обновленный класс в нужной строке, чтобы вызвать анимацию.
Однако, когда обновление поступает для одной и той же строки несколько раз подряд, только первое обновление вызывает вспышку. (Я считаю, что это связано с тем, что реакция сохраняет последний обновленный класс в строке, а не выполняет его повторную визуализацию, и поэтому CSS не перезапускает анимацию.)
Как я могу повторно запустить анимацию, если один и тот же элемент обновляется несколько раз подряд?
Демо и код: https://codesandbox.io/s/pensive-lamarr ... src/App.js
Соответствующие части реакции:
const Item = ({ id, isLastUpdated }) => (
Item {id}
);
const App = () => {
const [lastUpdatedId, setLastUpdatedId] = React.useState(undefined);
const itemIds = ["1", "2", "3"];
return (
The list of items
{itemIds.map((id) => (
))}
Trigger updates
{itemIds.map((id) => (
setLastUpdatedId(id)}>Update item {id}
))}
);
}
< /code>
Стили: < /p>
@keyframes fadingHighlight {
0% {
background-color: #ff0;
}
100% {
background-color: #fff;
}
}
.last-updated {
animation: fadingHighlight 2s;
}
Подробнее здесь: https://stackoverflow.com/questions/705 ... with-react
