Как добавить плавную анимацию CSS для этого списка перетаскивания ⇐ CSS

[Anonymous]

Вот мой код компонента React. Это компонент списка Todo, использующий Zustand для его управления состоянием Добавить элемент, удаление и переупорядочение, реализуют
Добавить TODO: Введите текст и нажмите Enter или нажмите кнопку «Добавить». (с анимацией). < /p>
переупорядочить Todos: Drag & Drop Todos, чтобы переупорядочить их. /> [*] На событиях перетаскивания < /li>
Delete Item < /li>
В Add Item < /li>
< /ol>
import React, { useState, useRef, useEffect } from 'react';
import { useTodoStore } from '@/store/toDoList';
import styles from './TodoList.module.css';

export const TodoList: React.FC = () => {
const [text, setText] = useState('');
const [draggedId, setDraggedId] = useState(null);
const [dragOverId, setDragOverId] = useState(null);
const [isAdding, setIsAdding] = useState(false);
const [removingId, setRemovingId] = useState(null);
const { todos, addTodo, toggleTodo, removeTodo, reorderTodos } =
useTodoStore();
const dragRef = useRef(null);

const handleAdd = () => {
if (text.trim()) {
setIsAdding(true);
addTodo(text);
setText('');
// Reset animation state after animation completes
setTimeout(() => setIsAdding(false), 300);
}
};

const handleKeyPress = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
handleAdd();
}
};

const handleDragStart = (e: React.DragEvent, id: string) => {
setDraggedId(id);
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', id);

// Add dragging class to the dragged element
if (dragRef.current) {
dragRef.current.style.opacity = '0.5';
}
};

const handleDragOver = (e: React.DragEvent, id: string) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setDragOverId(id);
};

const handleDragLeave = (e: React.DragEvent) => {
e.preventDefault();
setDragOverId(null);
};

const handleDrop = (e: React.DragEvent, targetId: string) => {
e.preventDefault();
const draggedId = e.dataTransfer.getData('text/html');

if (draggedId && draggedId !== targetId) {
const fromIndex = todos.findIndex((todo) => todo.id === draggedId);
const toIndex = todos.findIndex((todo) => todo.id === targetId);

if (fromIndex !== -1 && toIndex !== -1) {
reorderTodos(fromIndex, toIndex);
}
}

setDraggedId(null);
setDragOverId(null);

// Reset dragging styles
if (dragRef.current) {
dragRef.current.style.opacity = '1';
}
};

const handleDragEnd = () => {
setDraggedId(null);
setDragOverId(null);

// Reset dragging styles
if (dragRef.current) {
dragRef.current.style.opacity = '1';
}
};

const handleRemove = (id: string) => {
setRemovingId(id);
// Delay the actual removal to allow for animation
setTimeout(() => {
removeTodo(id);
setRemovingId(null);
}, 300);
};

return (


My Todo List



setText(e.target.value)}
onKeyPress={handleKeyPress}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>

Add

• {todos.map((todo, index) => (
  handleDragStart(e, todo.id)}
  onDragOver={(e) => handleDragOver(e, todo.id)}
  onDragLeave={handleDragLeave}
  onDrop={(e) => handleDrop(e, todo.id)}
  onDragEnd={handleDragEnd}
  ref={draggedId === todo.id ? dragRef : null}
  className={`
  ${styles.todoItem}
  ${draggedId === todo.id ? styles.dragging : ''}
  ${dragOverId === todo.id && draggedId !== todo.id ? styles.dragOver : ''}
  ${removingId === todo.id ? styles.removing : ''}
  ${isAdding && index === todos.length - 1 ? styles.adding : ''}
  `}
  >
  
  
  
  
  
  
  toggleTodo(todo.id)}
  >
  {todo.text}
  
  
  handleRemove(todo.id)}
  className={styles.deleteButton}
  aria-label="Delete todo"
  >
  
  
  
  
  
  ))}

{todos.length === 0 && (

No todos yet. Add one above!

)}

);
};

export default TodoList;


Подробнее здесь: https://stackoverflow.com/questions/797 ... -todo-list