In my Nuxt 3 or Vue 3-based application, I am utilizing the HTML Table and incorporating a row into it through a button click.
As I add a new row, I desire to implement a form of transition/animation so that the freshly added row is displayed with an animation effect while the existing rows remain unaffected. Additionally, I want the background color of the newly added row to transition momentarily to green or another color to indicate to the user that it is a new addition. I am wondering if it is achievable using tailwind CSS or if there are alternative methods to achieve this.
Below is the code snippet from my Nuxt 3 or Vue 3 based application:
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>
// Custom styles can be added here
</style>
I would appreciate guidance on how to incorporate animations and a flashing effect for the newly added row without affecting the existing ones.