Исчезать новую строку в CSS

Question

Итак, у меня есть эта таблица, где я знаю, как выделить второго ребенка.Однако я хочу, чтобы он исчез, чтобы было очевидно, что добавлен новый ряд.На данный момент 2-я строка всегда подсвечивается, однако хотелось бы получить некоторые рекомендации о том, как затухать для CSS (не использовал jquery в моем коде)

Я заметил, что в jquery есть опция fadeout, ноМожет кто-нибудь сказать мне, как исчезнуть в простой CSS.Ниже находится линия, которая выделяет 2-й ряд.я хотел бы исчезнуть, чтобы обозначить, что новая строка была добавлена ​​в таблицу.

tr:nth-child(2){background-color: red;}

Answer 1

Вы ищете переходов .Вы можете увидеть несколько хороших примеров / предложений здесь .

Моя рекомендация - научиться использовать ease-out.

Answer 2

Вы должны рассмотреть CSS : target .

. Псевдокласс: target CSS представляет уникальный элемент (целевой элемент) с идентификатором, совпадающим с фрагментом URL..

Дайте каждой строке вашей таблицы уникальный id.Используя :target в нашем CSS, мы можем перехватить существование этого идентификатора в адресной строке и соответственно запустить анимацию затухания.Анимация будет только при обновлении страницы, если id во фрагменте адресной строки совпадает с id в <tr>.

@keyframes fadeRow {
  from {
    background-color: red;
  }
  to {
    background-color: transparent;
  }
}

/* 
   If the address bar fragment matches the id of the 
   <tr>, trigger the fadeRow animation for only that <tr>.
*/
tr:target {
  animation: 1s fadeRow forwards;
}

/* Generic styles */
table { width: 100%; }
td { padding: .25em .5em; }
a { display: block; margin-bottom: .5em; }

<table>
  <tbody>
    <tr id="row_1">
      <td>one</td>
    </tr>
    <tr id="row_2">
      <td>two</td>
    </tr>
  </tbody>
</table>

<!-- Matches www.mysite.com#row_1 -->
<a href="#row_1">Simulate fadeout row 1</a>

<!-- Matches www.mysite.com#row_2 -->
<a href="#row_2">Simulate fadeout row 2</a>

https://jsfiddle.net/orLbwm58/

Answer 3

Если я понял, что вы спросили, вы можете сделать это с animation

tr:nth-child(2){
  background-color: red;
  animation: fadeout 2s forwards;
}

@keyframes fadeout {
    to {
        background-color:#ffffff;
    }
}