added animation

src/components/TodoItem/TodoItem.tsx

@@ -15,9 +15,10 @@ import { DispatchContext } from '../../Store';
 
 type Props = {
   todo: Todo;
+  nodeRef: React.RefObject<HTMLDivElement>;
 };
 
-export const TodoItem: React.FC<Props> = ({ todo }) => {
+export const TodoItem: React.FC<Props> = ({ todo, nodeRef }) => {
   const dispatch = useContext(DispatchContext);
 
   const [title, setTitle] = useState(todo.title);
@@ -89,6 +90,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
 
   return (
     <div
+      ref={nodeRef}
       data-cy="Todo"
       className={classNames('todo', { completed: todo.completed })}
     >

src/components/TodoList/TodoList.tsx

@@ -1,31 +1,53 @@
-import { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 import { StateContext } from '../../Store';
 
 import { TodoItem } from '../TodoItem/TodoItem';
 import { Filter } from '../../types/Filter';
 
 export const TodoList = () => {
+  const [first, setFirst] = useState(true);
   const { todos, filter } = useContext(StateContext);
 
+  useEffect(() => {
+    setFirst(false);
+  }, []);
+
   const filteredTodos = useMemo(() => {
+    if (first) {
+      return [];
+    }
+
     switch (filter) {
       case Filter.all:
         return todos;
-
       case Filter.active:
         return todos.filter(todo => !todo.completed);
-
       case Filter.completed:
         return todos.filter(todo => todo.completed);
     }
-  }, [filter, todos]);
+  }, [filter, todos, first]);
 
   return (
     <section className="todoapp__main" data-cy="TodoList">
-      {filteredTodos.map(todo => (
-        <TodoItem key={todo.id} todo={todo} />
-      ))}
+      <TransitionGroup>
+        {filteredTodos.map(todo => {
+          const nodeRef = React.createRef<HTMLDivElement>();
+
+          return (
+            <CSSTransition
+              nodeRef={nodeRef}
+              key={todo.id}
+              timeout={1000}
+              classNames="item"
+            >
+              <TodoItem todo={todo} nodeRef={nodeRef} />
+            </CSSTransition>
+          );
+        })}
+      </TransitionGroup>
     </section>
   );
 };

src/styles/todo-list.scss

@@ -98,3 +98,23 @@
     opacity: 0.5;
   }
 }
+
+.item-enter {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.item-enter-active {
+  max-height: 58px;
+  transition: max-height 0.5s linear;
+}
+
+.item-exit {
+  max-height: 58px;
+  overflow: hidden;
+}
+
+.item-exit-active {
+  max-height: 0;
+  transition: max-height 0.5s linear;
+}