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

每当新的一行出现时，我想突出显示第一行（我使用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>

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

---

需要注意的是，如果我从浏览器调试工具手动编辑html，并将属性

class=“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;
  }
}

此外，当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>

{{row.text}}
添加行
导出默认值{
姓名：“child1”，
数据（）{
返回{
行：[]
};
},
方法：{
addRow（）{
这个。行。推({
id:this.rows.length，
text:`text for row${this.rows.length}`
});
}
}
};
.突出显示{
-webkit动画：fadeIt 2s轻松输入输出；
动画：fadeIt 2s缓进缓出；
}
@-webkit关键帧fadeIt{
0% {
背景色：#FFFFFF；
}
15% {
背景色：#FD99；
}
30% {
背景色：#FFFFFF；
}
45% {
背景色：#FD99；
}
60% {
背景色：#FFFFFF；
}
75% {
背景色：#FD99；
}
100% {
背景色：#FFFFFF；
}
}
@关键帧fadeIt{
0% {
背景色：#FFFFFF；
}
15% {
背景色：#FD99；
}
30% {
背景色：#FFFFFF；
}
45% {
背景色：#FD99；
}
60% {
背景色：#FFFFFF；
}
75% {
背景色：#FD99；
}
100% {
背景色：#FFFFFF；
}
}

---

我尝试分离关键帧，但也没有成功。我不能做你们展示给我的，因为我使用的是v-data-table，它有v-slot用于迭代。我将用我的模板代码编辑我的问题。数据收集并不是那么简单，我需要向RESTAPI发出请求，每30秒收集一次数据，最终会出现新数据。这就是我重新分配数据表变量的时候。

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