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 {
@@ -185,3 +186,29 @@
     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,13 +32,13 @@ export const MainPart: React.FC = React.memo(() => {
                     descriptText="Начните новую демонстрацию жилого комплекса"
                     onClickButton={() => onClickCreateNewDemo()}
                     textButton='Начать новую демонстрацию'
-                />
+                    />
                 <OrLineContainer />
                 <ContentContainer 
                     descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
                     onClickButton={() => onClickPlaneDemo()}
                     textButton='Запланировать демонстрацию'
-                />
+                    />
             </>
         )        
     } 
@@ -69,9 +74,17 @@ export const MainPart: React.FC = React.memo(() => {
     return <div className="main-part-container">
         <div className="background-image"></div>
         <MainPartHeader />
-        <div className="main-part-content">
+        <TransitionGroup>
-            {currentContent}
+            <CSSTransition
-        </div>
+                key={changeContent.current}
+                timeout={300}
+                classNames={'change-main-part-content'}
+            >
+                <div className="main-part-content">            
+                    {currentContent}                
+                </div>
+            </CSSTransition>            
+        </TransitionGroup>            
         <CSSTransition
             in={showBackground}
             timeout={300}