try animate change content container

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);
 }

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>