Выделите элемент, затем вернитесь к исходному цвету. - PullRequest
Новая
       17

Выделите элемент, затем вернитесь к исходному цвету.

2 голосов
/ 24 апреля 2019

У меня есть элементы с разными background-color с.Когда ссылка нажата, я хочу выделить элемент другим цветом (желтый), а затем вернуться к исходному цвету элемента.Я знаю, что есть currentColor для элемента color, но нет ничего похожего на background-color.

Как можно плавно перейти от выделенного цвета обратно к оригинальному background-color элемента? Прямо сейчас он исчезает с цвета выделения на прозрачный, а затем резко возвращается к исходному цвету, когда анимация заканчивается. 

:target td {
  animation: highlight 1s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
  to {
  /* How do I set this back to the element's original background-color? */
    background-color: transparent;
  }
}
<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

Ответы [ 3 ]

2 голосов
/ 24 апреля 2019

Другой вариант - использовать background-color: initial на 50% анимации - см. Демонстрацию ниже: 

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: initial;
  }
}
<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>
1 голос
/ 24 апреля 2019

если вы просто удалите to из ключевых кадров, то для этого потребуется назначенный цвет фона.

, чтобы понять его, прочитайте этот раздел документа mdn doc https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Valid_keyframe_lists

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
}
<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>
1 голос
/ 24 апреля 2019

Только не включайте to для анимации. Это работает, потому что если конечное (или начальное) состояние не определено, браузер будет использовать существующие стили элемента (RE: Допустимые списки ключевых кадров в MDN ) 

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 1s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
}
<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>
...