CSS关键帧动画仅适用于一个元素

Question

我想在出现新行时突出显示第一行（我使用 vue.js 所以数据是反应性的）问题是我的动画只在第一次出现数据时才起作用。 第二次（以及下一次）即使在 DOM 上添加了适当的 css 类，它也不起作用。

我的 vue 模板代码：

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

使用 javascript 我选择新行document.querySelector("tbody tr").className = "highlighted"; 和 css 类是这样的：

.highlighted {
    -webkit-animation: fadeIt 2s ease-in-out;
    animation: fadeIt 2s ease-in-out; 

    @-webkit-keyframe fadeIt {
      0%   { background-color: #FFFFFF; }
      15%  { background-color: #FDFD99; }
      30%  { background-color: #FFFFFF; }
      45%  { background-color: #FDFD99; }
      60%  { background-color: #FFFFFF; }
      75%  { background-color: #FDFD99; }
      100% { background-color: #FFFFFF; }
    }

    @keyframes fadeIt {
      0%   { background-color: #FFFFFF; }
      15%  { background-color: #FDFD99; }
      30%  { background-color: #FFFFFF; }
      45%  { background-color: #FDFD99; }
      60%  { background-color: #FFFFFF; }
      75%  { background-color: #FDFD99; }
      100% { background-color: #FFFFFF; }
    }

我的问题不是它不起作用。 它仅在第一次更改数据时起作用。

需要注意的是，如果我从浏览器调试工具手动编辑 html 并将属性class="highlighted"到任何行，动画就可以完美地工作。

Answer 1

你的 css 似乎是无效的。 您需要在类选择器之外定义关键帧，这意味着您需要在定义关键帧之前关闭选择器：

.highlighted {
  -webkit-animation: fadeIt 2s ease-in-out;
  animation: fadeIt 2s ease-in-out;
}

@-webkit-keyframe fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  15% {
    background-color: #FDFD99;
  }
  30% {
    background-color: #FFFFFF;
  }
  45% {
    background-color: #FDFD99;
  }
  60% {
    background-color: #FFFFFF;
  }
  75% {
    background-color: #FDFD99;
  }
  100% {
    background-color: #FFFFFF;
  }
}

@keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  15% {
    background-color: #FDFD99;
  }
  30% {
    background-color: #FFFFFF;
  }
  45% {
    background-color: #FDFD99;
  }
  60% {
    background-color: #FFFFFF;
  }
  75% {
    background-color: #FDFD99;
  }
  100% {
    background-color: #FFFFFF;
  }
}

此外，当 Vue 可以为您完成 DOM 操作时，您自己进行 DOM 操作通常是不好的。 例如，即使在每一行上添加“突出显示”类，以下示例也能正常工作。 毕竟，您的动画只运行一次。

<template>
  <div class="comp-child1">
    <div v-for="row in rows" :key="row.id" class="highlighted">{{ row.text }}</div>

    <button @click="addRow">Add row</button>
  </div>
</template>

<script>
export default {
  name: "child1",

  data() {
    return {
      rows: []
    };
  },

  methods: {
    addRow() {
      this.rows.push({
        id: this.rows.length,
        text: `Text for row ${this.rows.length}`
      });
    }
  }
};
</script>

<style>
.highlighted {
  -webkit-animation: fadeIt 2s ease-in-out;
  animation: fadeIt 2s ease-in-out;
}

@-webkit-keyframe fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  15% {
    background-color: #FDFD99;
  }
  30% {
    background-color: #FFFFFF;
  }
  45% {
    background-color: #FDFD99;
  }
  60% {
    background-color: #FFFFFF;
  }
  75% {
    background-color: #FDFD99;
  }
  100% {
    background-color: #FFFFFF;
  }
}

@keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  15% {
    background-color: #FDFD99;
  }
  30% {
    background-color: #FFFFFF;
  }
  45% {
    background-color: #FDFD99;
  }
  60% {
    background-color: #FFFFFF;
  }
  75% {
    background-color: #FDFD99;
  }
  100% {
    background-color: #FFFFFF;
  }
}
</style>