feat: show animation on one or more item delete

Author: coderSuresh

app/globals.css

@@ -31,4 +31,20 @@ body {
 .todo_checkbox:checked~.todo_content {
     text-decoration: line-through;
     color: var(--grayish-text);
+}
+
+.animating {
+    animation: slideIn 0.6s ease-in-out;
+}
+
+@keyframes slideIn {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    100% {
+        opacity: 0.5;
+        transform: translateX(-100%);
+    }
 }

app/page.tsx

@@ -2,6 +2,7 @@ import BackgroundImage from "@/components/BackgroundImage"
 import DarkModeToggler from "@/components/DarkModeToggler"
 import Form from "@/components/Form"
 import TodosContents from "@/components/TodosContents"
+import AnimationProvider from "@/provider/AnimationProvider"
 import ThemeProvider from "@/provider/ThemeProvider"
 import TodoProvider from "@/provider/TodoProvider"
 
@@ -10,6 +11,7 @@ const Home = () => {
   return (
     <ThemeProvider>
       <TodoProvider>
+        <AnimationProvider>
         <main className="bg-bg h-screen">
 
           <BackgroundImage />
@@ -36,6 +38,7 @@ const Home = () => {
           <p className="text-grayish-text text-center md:mt-0 pb-10 mt-20">Drag and drop yo reorder list</p>
 
         </main>
+        </AnimationProvider>
       </TodoProvider>
     </ThemeProvider>
   )

components/ClearAllCompletedBtn.tsx

@@ -1,15 +1,24 @@
 'use client'
 import React from 'react'
 import { TodoContext } from '@/context/TodoContext'
+import { AnimationContext } from '@/context/AnimationContext'
 
 const ClearAllCompletedBtn = ({ todos }: { todos: TodoType[] }) => {
 
     const { setIsManipulated } = React.useContext(TodoContext)
+    const {setAnimating} = React.useContext(AnimationContext)
 
     const deleteAll = () => {
-        const newTodos = todos.filter(todo => !todo.completed)
-        localStorage.setItem('todos', JSON.stringify(newTodos))
-        setIsManipulated(true)
+
+        const completedTodos = todos.filter(todo => todo.completed)
+        setAnimating(completedTodos.map(todo => todo.id.toString()))
+
+        setTimeout(() => {
+            const newTodos = todos.filter(todo => !todo.completed)
+            localStorage.setItem('todos', JSON.stringify(newTodos))
+            setIsManipulated(true)
+            setAnimating([])
+        }, 500);
     }
 
     return (

components/ListItem.tsx

@@ -2,10 +2,12 @@
 import React from 'react'
 import Image from 'next/image'
 import { TodoContext } from '@/context/TodoContext'
+import { AnimationContext } from '@/context/AnimationContext'
 
 const ListItem = ({ id, content, completed, todos }: ListItemProps) => {
 
   const { setIsManipulated } = React.useContext(TodoContext)
+  const {animating, setAnimating} = React.useContext(AnimationContext)
 
   const handleChange = () => {
     const todo = todos.find(todo => todo.id === Number(id))
@@ -15,14 +17,23 @@ const ListItem = ({ id, content, completed, todos }: ListItemProps) => {
   }
 
   const deleteItem = () => {
-    const newTodos = todos.filter(todo => todo.id !== Number(id))
-    localStorage.setItem('todos', JSON.stringify(newTodos))
-    setIsManipulated(true)
+    setAnimating([id])
+
+    console.log(animating)
+
+    setTimeout(() => {
+      const newTodos = todos.filter(todo => todo.id !== Number(id))
+      localStorage.setItem('todos', JSON.stringify(newTodos))
+
+      setIsManipulated(true)
+
+      setAnimating([])
+    }, 500)
   }
 
   return (
     <>
-      <div className="todo_item flex items-center justify-between w-full group px-5 py-2 relative">
+      <div className={`${(animating.includes(id)) ? 'animating' : ''} todo_item flex items-center justify-between w-full group px-5 py-2 relative`}>
         <div className='flex items-center w-full'>
           <input
             onChange={handleChange}

components/TodosContents.tsx

@@ -45,7 +45,7 @@ const TodosContainer = () => {
                         <div className="animate-pulse bg-grayish-text h-full rounded-md" />
                     </div>
                     :
-                    <div className="bg-card-bg rounded-md transition-all shadow-md py-2 mt-8 mb-10" >
+                    <div className="bg-card-bg rounded-md transition-all overflow-x-hidden shadow-md py-2 mt-8 mb-10" >
                         {renderTodos()}
                         <ListControls todos={todos} len={todos.filter(todo => !todo.completed).length} />
                     </div>

context/AnimationContext.ts

@@ -0,0 +1,7 @@
+'use client'
+import React from 'react'
+
+export const AnimationContext = React.createContext({
+    animating: [] as string[],
+    setAnimating: (animating: string[] ) => { },
+})

provider/AnimationProvider.tsx

@@ -0,0 +1,16 @@
+'use client'
+import React from 'react'
+import { AnimationContext } from '@/context/AnimationContext'
+
+const AnimationProvider = ({ children }: ChildrenProps) => {
+
+    const [animating, setAnimating] = React.useState<string[]>([])
+
+    return (
+        <AnimationContext.Provider value={{ animating, setAnimating }}>
+            {children}
+        </AnimationContext.Provider>
+    )
+}
+
+export default AnimationProvider