Question

所以我有这张桌子，我知道如何突出显示第二个孩子。但是我希望它淡出，以便很明显添加了新行。此刻，第二行始终突出显示，但是想要一些关于如何淡出CSS的指导（我的代码中没有使用过jquery）

我注意到jquery中有淡出选项，但是有人可以告诉我如何在普通CSS中淡出。下面是突出显示第二行的行。我想淡出以表示表中已添加新行。

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

Answer 1

如果我了解您的要求，可以使用animation

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

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

Answer 2

您正在搜索transitions。您可以看到一些很好的示例/建议here。

我的建议是学习使用ease-out。

Answer 3

您应该考虑CSS :target。

：target CSS伪类表示一个唯一元素（目标元素），其ID与网址的片段匹配。

为每个表格行赋予唯一的id。使用CSS中的:target，我们可以在地址栏中拦截该 id的存在，并相应地触发淡出动画。如果地址栏片段中的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/

在CSS中淡出新行

3 个答案: