2
votes

Mettre l'élément en surbrillance puis revenir à la couleur d'origine

J'ai des éléments avec différentes background-color s. Lorsqu'un lien est cliqué, je souhaite mettre en évidence l'élément avec une couleur différente (jaune), puis revenir à la couleur d'origine de l'élément. Je sais qu'il y a currentColor pour la couleur d'un élément, mais il n'y a rien de similaire pour background-color .

Comment puis-je en douceur passer d'une couleur de surbrillance à la couleur d'arrière-plan d'origine de l'élément? À l'heure actuelle, il passe de la couleur de surbrillance à transparent, puis revient brusquement à la couleur d'origine lorsque l'animation se termine.

<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>

: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;
  }
}

css css-transitions css-animations background-color

2 commentaires

S'il y avait un moment où "juste utiliser jQuery" était valide… :)

Mais, oh! les joies de travailler avec zéro bibliothèque externe!

3 Réponses :

1
votes

N'incluez simplement pas de à pour l'animation. Cela fonctionne car si un état de fin (ou de début) n'est pas défini, le navigateur utilisera les styles existants de l'élément (RE: Listes d'images clés valides sur MDN )

<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>

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 1s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
}

0 commentaires

1
votes

si vous supprimez simplement à des images clés, la couleur d'arrière-plan attribuée sera utilisée.

pour le comprendre, lisez cette section de mdn doc https://developer.mozilla.org/en-US / docs / Web / CSS / @ keyframes # Valid_keyframe_lists

<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>

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
}

0 commentaires

2
votes

Une autre option consiste à utiliser background-color: initial sur 50% de l'animation - voir la démo ci-dessous:

<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>

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: initial;
  }
}

1 commentaires

Ooh, j'aime cette idée. On dirait que cela ne fonctionne pas dans IE 11.