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操作时，通常自己做是不好的。例如，即使在每行上添加“突出显示”类，以下示例也可以正常工作。毕竟，动画只能运行一次。

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

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

1 个答案: