From 7d28bb505479bd6d0beefdb9e2a4142c320e57f5 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Mon, 25 Jul 2022 18:09:10 +0530
Subject: [PATCH] try animate change content container

---
 src/components/mainPart/mainPart.css | 27 ++++++++++++++++++++
 src/components/mainPart/mainPart.tsx | 37 +++++++++++++++++++---------
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index eb59fc5..8141fc7 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -60,6 +60,7 @@
     display: flex;
     flex-direction: column;
     gap: 30px;
+    transition: .5s;
 }
 
 .main-part-text-container {
@@ -184,4 +185,30 @@
 .show-background-exit-active {
     opacity: 0;
     transition: .3s;
+}
+
+/* starting ENTER animation */
+.change-main-part-content-enter {
+    opacity: 0;
+    transform: translateY(0);
+}
+
+/* ending ENTER animation */
+.change-main-part-content-enter-active {
+    opacity: 1;    
+    transition: .3s;
+    transform: translateY(0);
+}
+
+/* starting EXIT animation */
+.change-main-part-content-exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* ending EXIT animation */
+.change-main-part-content-exit-active {
+    opacity: 0;    
+    transition: .3s;
+    transform: translateY(0);
 }
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 92241ff..99332dd 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -1,14 +1,15 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import './mainPart.css';
 import { PinkButton } from "./button";
 import { MainPartHeader } from "./mainPartHeader";
 import { ContentContainer } from "./contentContainer";
 import { MainPartFooter } from "./main-part-footer";
 import { OrLineContainer } from "./orLineContainer";
-import { CSSTransition } from "react-transition-group";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 
 export const MainPart: React.FC = React.memo(() => {
+    const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [currentContent, setCurrentContent] = useState<JSX.Element>(
         <ContentContainer 
@@ -19,6 +20,10 @@ export const MainPart: React.FC = React.memo(() => {
         />
     );
 
+    useEffect(() => {
+        // changeContent.current += 1;
+    }, [currentContent])
+
     function onClickStartDemo() {
         setCurrentContent(
             <>
@@ -27,18 +32,18 @@ export const MainPart: React.FC = React.memo(() => {
                     descriptText="Начните новую демонстрацию жилого комплекса"
                     onClickButton={() => onClickCreateNewDemo()}
                     textButton='Начать новую демонстрацию'
-                />
+                    />
                 <OrLineContainer />
                 <ContentContainer 
                     descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
                     onClickButton={() => onClickPlaneDemo()}
                     textButton='Запланировать демонстрацию'
-                />
+                    />
             </>
-        )
-    }
+        )        
+    } 
 
-    function onClickCreateNewDemo() {
+    function onClickCreateNewDemo() {        
         setCurrentContent(
             <ContentContainer 
                 titleText="Демонстрация запущена"
@@ -47,7 +52,7 @@ export const MainPart: React.FC = React.memo(() => {
                 textButton='Подключиться'
                 accessCode="1876"
             />
-        )
+        )            
     }
 
     function onClickPlaneDemo() {
@@ -69,14 +74,22 @@ export const MainPart: React.FC = React.memo(() => {
     return <div className="main-part-container">
         <div className="background-image"></div>
         <MainPartHeader />
-        <div className="main-part-content">
-            {currentContent}
-        </div>
+        <TransitionGroup>
+            <CSSTransition
+                key={changeContent.current}
+                timeout={300}
+                classNames={'change-main-part-content'}
+            >
+                <div className="main-part-content">            
+                    {currentContent}                
+                </div>
+            </CSSTransition>            
+        </TransitionGroup>            
         <CSSTransition
             in={showBackground}
             timeout={300}
             classNames='show-background'
-            unmountOnExit
+            unmountOnExit            
         >
             <div className="background-container"></div>
         </CSSTransition>