Исчезающий цвет фона на полосатом столе - PullRequest
Новая
       7

Исчезающий цвет фона на полосатом столе

0 голосов
/ 29 января 2019

У меня есть полосатая таблица начальной загрузки (.table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;}), и я обращаю внимание пользователя на обновленную строку, используя этот небольшой кусочек CSS: 

.attention { animation: 3s attention; }
@keyframes attention {
    0% { background-color: #bcf516; }
    100% { background-color: initial; }
}

... и добавляя class="attention" динамически до <tr>, из которых когда-либо была обновлена ​​строка.

Таким образом, таблица с обновленной строкой # 3 будет выглядеть примерно так: 

<table class="table table-striped">
  <tr><td>Row #1</td></tr>
  <tr><td>Row #2</td></tr>
  <tr class="attention"><td>Row #3</td></tr>
  <tr><td>Row #4</td></tr>
</table>

Она работает почти как шарм,Для белых рядов это идеально.Но для серых строк затухание переходит полностью к белому, а затем внезапно возвращается к исходному серому.

Как это можно исправить, желательно только с помощью CSS?

1 Ответ

0 голосов
/ 29 января 2019

Просто удалите состояние 100% из анимации, и будет использоваться цвет, определенный в элементе. 

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.attention {
  animation: 3s attention;
}

@keyframes attention {
  0% {
    background-color: #bcf516;
  }
}
<table class="table table-striped">
  <tr>
    <td>Row #1</td>
  </tr>
  <tr>
    <td>Row #2</td>
  </tr>
  <tr class="attention">
    <td>Row #3</td>
  </tr>
  <tr>
    <td>Row #4</td>
  </tr>
</table>

Значение initial для цвета фона transparent.Таким образом, вы сначала уменьшите яркость до transparent, а затем вернетесь к определенному цвету, когда анимация будет завершена.Вот почему он отлично работает с неокрашенным tr.

Если ключевой кадр 100% или to не указан, то пользовательский агент создает 100% ключевой кадр, используя вычисленные значения анимируемых свойств. ref

...