如何在一秒钟内突出显示整行答案

【问题标题】：How to highlight, for one second, an entire row如何在一秒钟内突出显示整行
【发布时间】：2019-11-15 03:22:29
【问题描述】：

我来自 jquery 背景，选择器易于使用。我想要做的是一个 tbody 的第一个孩子（只有一个表），我想突出显示整行。我尝试在 tr 上使用 css :first-child 选择器，但我不知道为什么它不起作用。有没有办法在脚本方面做到这一点？使用 vue.js 选择元素？因为它不会向元素添加任何 id（就像 Django 等其他框架所做的那样）。这是我的模板：

<v-container v-else grid-list-xl>
      <v-data-table
        :disable-initial-sort="true"
        :rows-per-page-items="[10, 20, 30]"
        :headers="headers"
        :items="data_table"
        class="elevation-1"
      >
        <template v-if="loading" v-slot:no-data>
          <v-alert :value="true" color="warning" icon="warning">
            Trayendo datos del gateway, porfa esperate...
          </v-alert>
        </template>
        <template v-else v-slot:items="props">
          <td><strong>{{ props.item.time }}</strong></td>
          <td>{{ props.item.A }}</td>
          <td>{{ props.item.B }}</td>
          <td>{{ props.item.C }}</td>
        </template>
      </v-data-table>
  </v-container>

这可能是因为我每分钟左右都会在表格上获得一个新行，并且我希望用户能够轻松地看到添加了新数据。这是我正在尝试的 css：

  tr :first-child {
    color: red;
    background-image:none !important; 
        -o-animation: fadeIt 5s ease-in-out; 
           animation: fadeIt 5s ease-in-out; 
  };

  @-o-keyframes fadeIt {
    0%   { background-color: #FFFFFF; }
    50%  { background-color: #AD301B; }
    100% { background-color: #FFFFFF; }
  }
  @keyframes fadeIt {
    0%   { background-color: #FFFFFF; }
    50%  { background-color: #AD301B; }
    100% { background-color: #FFFFFF; }
  }

【问题讨论】：

使用tr:first-child 没有空格
尝试使用：.v-datatable tbody tr:first-child {}作为我的例子：codepen.io/leenmalka/pen/MMBbJw
并且可能将infinite添加到动画中：w3schools.com/cssref/css3_pr_animation.asp
@לבנימלכה 我不知道为什么它对你有效，但对我无效。这真的很奇怪。请注意，如果我将元素从 tr 更改为 td，它会在每个第一个 td 元素上显示动画。所以问题出在选择器上，但确实很奇怪。

标签： javascript css vue.js dom css-selectors

【解决方案1】：

您在tr : first-child 中添加了不需要的空间。

tr:first-child {
  color: red;
  background-image: none;
  -o-animation: fadeIt 5s ease-in-out;
  animation: fadeIt 5s ease-in-out;
}

;
@-o-keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  50% {
    background-color: #AD301B;
  }
  100% {
    background-color: #FFFFFF;
  }
}

@keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  50% {
    background-color: #AD301B;
  }
  100% {
    background-color: #FFFFFF;
  }
}

<table>
  <tr>
    <td><strong>1</strong></td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td><strong>1</strong></td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>

看看这个solution：

【讨论】：

应该是评论！！
@לבנימלכה 不，任何试图回答手头问题的东西都应该是答案。这似乎试图回答这个问题，所以它在哪里很好。
它也不起作用。我不知道是不是因为模板本身没有 tr 元素，而是由 vue v-slot 添加，这会导致问题。也许我需要在脚本方面处理这个问题。
显示新链接（当你保存新链接创建时）
代码不工作，codesandbox.io 可能适合这个。请尝试在那里上传您的代码并确保它正在运行，或者写下不适合您的代码。

【解决方案2】：

我找到了解决方案。显然，如果您没有在 html 代码上显式添加 tr 元素（即使它已添加到 DOM 上），则选择器将不起作用。这就是为什么我只需要添加一个tr 来包装每个td。

我知道这是一些基本的 HTML 标记，但我认为如果它出现在 DOM 上，它无论如何都会起作用，但事实并非如此。这是我现在的工作代码：

<v-container grid-list-xl>
      <v-data-table
        :disable-initial-sort="true"
        :rows-per-page-items="[10, 20, 30]"
        :headers="headers"
        :items="data_table"
        class="elevation-1"
      >
        <template v-if="loading" v-slot:no-data>
          <v-alert :value="true" color="warning" icon="warning">
            Trayendo datos del gateway, porfa esperate...
          </v-alert>
        </template>
        <template v-else v-slot:items="props">
          <tr>
            <td><strong>{{ props.item.time }}</strong></td>
            <td>{{ props.item.A }}</td>
            <td>{{ props.item.B }}</td>
            <td>{{ props.item.C }}</td>
          </tr>
        </template>
      </v-data-table>
  </v-container>

【讨论】：