Exploring the world of animation in React can be an exciting journey, especially

Question

Exploring the world of animation in React can be an exciting journey, especially

In my useState, I have an array of objects

const [tasks,setTasks] = useState([{completed: true},{completed: false}])

I decided to sort the tasks so that completed ones are at the bottom.

<div>
  {tasks.map((elem) => (
    <div
      onClick={
        //I want to change completed to true if it's currently false. Any ideas on how to create a CSS animation that makes it look like the task is falling down?
      }
    >
      {elem.name}
    </div>
  ))}
</div>;

I attempted using shuffle and ReactCSSTransition, but they are outdated and not effective. Are there any other libraries I can use for this purpose?

javascript css reactjs

Answer 1

Answer №1

Include a unique identifier in the state.

const [tasks, setTasks] = useState([
 { id: 1, completed: true, name: "Task 1" },
 { id: 2, completed: false, name: "Task 2" },
]);

Full code:

const [tasks, setTasks] = useState([
{ id: 1, completed: true, name: "Task 1" },
{ id: 2, completed: false, name: "Task 2" },
]);
const [updatedTasks, setUpdatedTasks] = useState([]);

useEffect(() => {
 if (updatedTasks.length > 0) {
   setTasks(updatedTasks);
   setUpdatedTasks([]);
 }
}, [updatedTasks]);

return (
 <div>
    {tasks.map((elem) => (
     <div
       onClick={() => {
         const updatedTask = tasks.map((task) =>
           task.id === elem.id
            ? { ...task, completed: !task.completed }
            : task
        );
        setUpdatedTasks(updatedTask);
      }}
    >
      <div className={elem.completed ? "" : "fall-down"}>{elem.name}</div>
    </div>
  ))}
</div>

add css :

.fall-down {
   animation: fallDown 0.5s ease-out forwards;
 }

@keyframes fallDown {
  0% {
  transform: translateY(0);
  opacity: 1;
}
100% {
  transform: translateY(50px);
  opacity: 0;
 }
}

Answer 2

Include a unique identifier in the state.

const [tasks, setTasks] = useState([
 { id: 1, completed: true, name: "Task 1" },
 { id: 2, completed: false, name: "Task 2" },
]);

Full code:

const [tasks, setTasks] = useState([
{ id: 1, completed: true, name: "Task 1" },
{ id: 2, completed: false, name: "Task 2" },
]);
const [updatedTasks, setUpdatedTasks] = useState([]);

useEffect(() => {
 if (updatedTasks.length > 0) {
   setTasks(updatedTasks);
   setUpdatedTasks([]);
 }
}, [updatedTasks]);

return (
 <div>
    {tasks.map((elem) => (
     <div
       onClick={() => {
         const updatedTask = tasks.map((task) =>
           task.id === elem.id
            ? { ...task, completed: !task.completed }
            : task
        );
        setUpdatedTasks(updatedTask);
      }}
    >
      <div className={elem.completed ? "" : "fall-down"}>{elem.name}</div>
    </div>
  ))}
</div>

add css :

.fall-down {
   animation: fallDown 0.5s ease-out forwards;
 }

@keyframes fallDown {
  0% {
  transform: translateY(0);
  opacity: 1;
}
100% {
  transform: translateY(50px);
  opacity: 0;
 }
}

Exploring the world of animation in React can be an exciting journey, especially

Answer №1

Similar questions

Steps for changing an image with another image upon button click in Angular 6

Issue with triggering onFinish in antd Form component

What steps should I follow to convert the cookie values into a 'key: value' array?

The blending of Angular 4 HTTP responses creates a jumbled mess

Is it necessary to re-initialize the store with different preloaded states when navigating between pages in NextJS using Redux?

What is the reason for font names appearing yellow rather than blue in the "font-family" property?

Unable to execute the "Writing Assertions" Playwright example due to technical difficulties

Incorporate the NestJS module seamlessly into one module from another module without the need to import it

Guide to dynamically generating Angular watchers within a loop

Unique design elements of chevron and circle on the Slick Slider vanish upon clicking

Text Alignment Issue in Icon Bar of Zurb Foundation 5

Toggle the visibility of each item in the list using jQuery

The npm audit tool uncovers unexpected dependencies in your project

"Using Javascript to trigger a postback on the parent page from the child page

There appears to be an issue with the onmousemove function

Turning JavaScript Object into a Decimal Value

Trouble with the page not updating after creating or updating a task

Unusual glitch involving padding

Presentation for a div's background image with the use of jQuery

React Syntax Error: Regular Expression Unfinished