feat(ui): add to-do render animation

Author: mateusfg7

src/components/TodoItem.vue

@@ -5,28 +5,15 @@ defineProps<{ todo: TodoData; removeFn: (id: string) => void; toggleFn: (id: str
 </script>
 
 <template>
-  <div
-    class="group flex items-center justify-between gap-5 rounded-lg p-2 text-xl"
-    :class="!todo.complete && 'bg-neutral-200/30'"
-    :title="todo.name"
-  >
+  <div class="group flex items-center justify-between gap-5 rounded-lg p-2 text-xl animate-fade-up"
+    :class="!todo.complete && 'bg-neutral-200/30'" :title="todo.name">
     <div class="flex w-full items-center gap-5 overflow-hidden">
-      <input
-        type="checkbox"
-        :checked="todo.complete"
-        @click="toggleFn(todo.id)"
-        class="cursor-pointer rounded border border-neutral-700 bg-transparent p-3 text-vue-light focus:outline-none focus:ring-0"
-      />
-      <span
-        :class="todo.complete && 'text-neutral-500 line-through'"
-        class="overflow-hidden text-ellipsis whitespace-nowrap"
-        >{{ todo.name }}</span
-      >
+      <input type="checkbox" :checked="todo.complete" @click="toggleFn(todo.id)"
+        class="cursor-pointer rounded border border-neutral-700 bg-transparent p-3 text-vue-light focus:outline-none focus:ring-0" />
+      <span :class="todo.complete && 'text-neutral-500 line-through'"
+        class="overflow-hidden text-ellipsis whitespace-nowrap">{{ todo.name }}</span>
     </div>
-    <button
-      @click="removeFn(todo.id)"
-      class="text-neutral-500/20 transition-colors hover:text-red-700"
-    >
+    <button @click="removeFn(todo.id)" class="text-neutral-500/20 transition-colors hover:text-red-700">
       <PhTrash weight="regular" />
     </button>
   </div>

tailwind.config.js

@@ -7,6 +7,23 @@ module.exports = {
       colors: {
         'vue-light': '#42b883',
         'vue-dark': '#35495e'
+      },
+      animation: {
+        'fade-up': 'fade-up .5s 0s'
+      },
+      keyframes: {
+        'fade-up': {
+          '0%': {
+            opacity: '0',
+            transform:
+              'translate(var(--tw-translate-x), 50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))'
+          },
+          '100%': {
+            opacity: '1',
+            transform:
+              'translate(var(--tw-translate-x), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))'
+          }
+        },
       }
     }
   },