如何添加动画并在表格中闪烁新添加的行，同时保持所有其他行样式不变？

Question

我在基于 Nuxt 3 或 Vue 3 的应用程序中使用

HTML Table

，并通过单击按钮向其中添加一行。

当我添加新行时，我想添加一种

transition/animation

，以便新添加的行出现动画，而其余行保持原样，并且新添加的行背景颜色变为绿色或某种颜色一秒钟当它闪烁时向用户显示它是新添加的。我想知道是否可以使用

tailwind CSS

来实现这一目标，或者需要如何实现这一目标。

以下是我从基于 Nuxt 3 或 Vue 3 的应用程序中获得的代码：

pages/test.vue：

<template>
  <div
    class="py-8 bg-white dark:bg-slate-800 shadow-lg rounded-lg border border-gray-700 p-4 text-black dark:text-white"
  >
    <div class="max-w-screen-lg mx-auto">
      <transition-group name="table-row" tag="div" class="overflow-x-auto">
        <table
          class="w-full table-auto bg-white dark:bg-slate-800 shadow-lg rounded-lg border border-gray-700 text-black dark:text-white"
          key="table"
        >
          <caption></caption>
          <thead key="thead">
            <tr class="bg-gray-200 dark:bg-gray-700">
              <th class="py-2 px-4 font-semibold text-left">ID</th>
              <th class="py-2 px-4 font-semibold text-left">Event</th>
              <th class="py-2 px-4 font-semibold text-left">Options</th>
            </tr>
          </thead>
          <tbody key="t-body">
            <tr
              v-for="row in rows"
              :key="row.ID"
              class="hover:bg-gray-100 dark:hover:bg-gray-600"
            >
              <td class="py-2 px-4">{{ row.ID }}</td>
              <td class="py-2 px-4">{{ row.Event }}</td>
              <td class="py-2 px-4">
                <button
                  class="hover:ring-slate-200 dark:hover:ring-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:ring-offset-slate-900 flex h-12 w-12 items-center justify-center rounded-full border border-slate-300 ring-1 ring-transparent transition-all duration-300 hover:ring-offset-4"
                  @click="handleOptionClick(row)"
                >
                  <span class="justify-center items-center">
                    <Icon
                      icon="ic:round-view-day"
                      width="20"
                      height="20"
                    ></Icon>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </transition-group>
    </div>
  </div>
  <button
    @click="addRow"
    class="mt-4 px-4 py-2 text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md"
  >
    Add Row
  </button>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import { ref, reactive } from "vue";

const rowCount = ref(3);

const table = reactive({
  sortable: true,
});

const rows = ref([
  {
    ID: "1",
    Event: "Event 1",
  },
  {
    ID: "2",
    Event: "Event 2",
  },
]);

const addRow = () => {
  const newRow = {
    ID: rowCount.value + 1,
    Event: "RowValue : " + (rowCount.value + 1),
  };
  rows.value.unshift(newRow); // Add the new row to the beginning of the array
  rowCount.value++;

  // Highlight the newly added row with a temporary green background
  newRow.highlighted = true;
  setTimeout(() => {
    newRow.highlighted = false;
  }, 1000); // Remove the highlight after 1 second
};

const handleOptionClick = (row) => {
  console.log("Option button clicked for row:", row);
};
</script>

<style>
</style>

有人可以告诉我如何在新添加的行中添加动画和闪烁，而其余部分保持原样吗？

Answer 1

这将为整行应用闪烁效果，持续时间为

1.5s

、

3

次。您只需将

highlight

类（通过代码）添加到

tr

:

@keyframes new-row {
  from { background-color: red;}
  to { background-color: pink; }
}

#your-table-id {
  tr.highlight td {
    animation: new-row 1.5s 3;
  }
}

示例：https://jsfiddle.net/n8y2g9c1/