Add flip animation when task status changes 🔄

[anoopcodehack]

Add flip animation when task status changes 🔄

File: client/src/components/Board/TaskCard.jsx

Tasks just disappear and reappear
when moved between columns 💀 fr!!

Fix: add CSS animation in index.css:
@Keyframes cardFlip {
0% { transform: rotateY(0deg); opacity: 1; }
50% { transform: rotateY(90deg); opacity: 0; }
100% { transform: rotateY(0deg); opacity: 1; }
}

.card-flip {
animation: cardFlip 0.4s ease-in-out;
}

// trigger in TaskCard when status prop changes:
const [isFlipping, setIsFlipping] = useState(false)
const prevStatus = useRef(task.status)

useEffect(() => {
if (prevStatus.current !== task.status) {
setIsFlipping(true)
setTimeout(() => setIsFlipping(false), 400)
prevStatus.current = task.status
}
}, [task.status])

className={... ${isFlipping ? 'card-flip' : ''}}

~15 lines! Pure CSS + React ✅
No backend needed 🎯