Nuxt 3/Vue 3 为新添加的行添加动画和闪烁效果，营造直观视觉提示

2024-03-16 02:13:00

Nuxt 3/Vue 3 中为新添加的行添加动画和闪烁效果

介绍

在 Nuxt 3 或 Vue 3 中使用 HTML 表格，点击按钮添加一行时，往往希望为新添加的行添加一些视觉效果，以突出其新状态。本文将详细介绍如何使用 Tailwind CSS 实现这种效果，包括为新行添加动画和背景颜色闪烁效果，同时保持其他行样式不变。

步骤指南

1. 定义行动画类

Tailwind CSS 中的 transition 类可用于为元素添加动画效果。对于新行，我们可以定义一个名为 animate-fade-in 的类，如下所示：

.animate-fade-in {
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.animate-fade-in.enter {
  opacity: 1;
}

此类将使新行在添加时淡入，持续时间为 0.5 秒。

2. 添加新行闪烁效果

要为新行添加闪烁效果，我们可以利用 Tailwind CSS 的 bg-* 类动态设置背景颜色。创建一个名为 bg-flash 的类：

.bg-flash {
  background-color: green;
  animation: flash 1s infinite;
}

@keyframes flash {
  0% {
    background-color: green;
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: green;
  }
}

此类将为新行添加绿色的背景颜色，并通过 flash 动画在 1 秒内闪烁。

3. 更新 Vue 组件

在 Vue 组件中，在添加新行时应用这些类。修改 addRow 方法：

const addRow = () => {
  const newRow = {
    ID: rowCount.value + 1,
    Event: "RowValue : " + (rowCount.value + 1),
    animated: true, // 新属性
    flashing: true, // 新属性
  };
  rows.value.unshift(newRow); // 将新行添加到数组开头
  rowCount.value++;

  // 添加闪烁效果
  setTimeout(() => {
    newRow.animated = false; // 动画完成后移除 animated 属性
    newRow.flashing = false; // 闪烁完成后移除 flashing 属性
  }, 1000); // 1 秒后移除效果
};

4. 绑定类

在模板中，将 animate-fade-in 类绑定到 tr 元素，将 bg-flash 类绑定到新添加行的 tr 元素，为新行添加淡入动画和闪烁效果：

<tr
  v-for="row in rows"
  :key="row.ID"
  :class="{ 'animate-fade-in': row.animated, 'bg-flash': row.flashing }"
  class="hover:bg-gray-100 dark:hover:bg-gray-600"
>
  ...
</tr>

完整代码

以下是完整更新后的 Vue 组件代码：

<template>
  <!-- ... -->
  <tr
    v-for="row in rows"
    :key="row.ID"
    :class="{ 'animate-fade-in': row.animated, 'bg-flash': row.flashing }"
    class="hover:bg-gray-100 dark:hover:bg-gray-600"
  >
    <!-- ... -->
  </tr>
</template>

<script setup>
  <!-- ... -->
  const addRow = () => {
    // ...
    // 添加闪烁效果
    setTimeout(() => {
      newRow.animated = false;
      newRow.flashing = false;
    }, 1000);
  };
</script>

<style>
  <!-- ... -->
</style>