如何为Vue3/Nuxt3表格新增行添加Tailwind CSS动画与高亮闪烁

完全可以用Tailwind CSS结合Vue的过渡系统实现需求，下面是具体的修改方案：

关键修改点 #

1. 修正Transition Group的结构 #

原来的<transition-group>包裹了整个表格，无法对单独行生效。需要将它移到<tbody>内部，直接包裹每一行<tr>，同时把tag设为tbody以符合HTML结构规范。

2. 绑定闪烁样式与动画 #

通过Vue的条件类绑定，给新增行添加Tailwind的animate-pulse闪烁动画和绿色背景色，1秒后自动移除。

3. 自定义行进入动画 #

结合Vue过渡类和Tailwind工具类，实现新增行的淡入+下滑效果。

完整修改后的代码 #

<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 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"
      >
        <caption></caption>
        <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>
        <!-- 把transition-group移到tbody内部 -->
        <transition-group name="table-row" tag="tbody">
          <tr
            v-for="row in rows"
            :key="row.ID"
            :class="[
              'hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300',
              row.highlighted ? 'animate-pulse bg-green-100 dark:bg-green-900/50' : ''
            ]"
          >
            <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>
        </transition-group>
      </table>
    </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),
    highlighted: true // 直接初始化高亮状态
  };
  rows.value.unshift(newRow);
  rowCount.value++;

  setTimeout(() => {
    newRow.highlighted = false;
  }, 1000);
};

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

<style>
/* 自定义行进入动画 */
.table-row-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}
.table-row-enter-active {
  @apply transition-all duration-300 ease-out;
}
</style>

效果说明 #

• 新增行时会从上方淡入下滑，同时背景色变为浅绿色（深色模式下为深绿半透明）并闪烁1秒
• 其他行的原有样式和hover效果完全保留
• 动画逻辑完全基于Vue过渡系统和Tailwind工具类，无需额外第三方库

内容的提问来源于stack exchange，提问作者BATMAN_2008