add animation on change content in container

src/components/mainPart/mainPart.tsx

@@ -21,7 +21,8 @@ type FormData = {
 export const MainPart: React.FC = React.memo(() => {
     // const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
     const {lang, setLang} = useContext(ContextLang);
-    const [changeContent, setChangeContent] = useState(0);
+    // const [changeContent, setChangeContent] = useState(0);
+    const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
     const defaultCurrentContent = 
@@ -45,13 +46,21 @@ export const MainPart: React.FC = React.memo(() => {
         
     }, [lang])
 
+    useEffect(() => {
+        console.log('change')
+    }, [changeContent])
+
     function changeLang(lang: 'ru' | 'en') {
         setLang(lang);
         document.querySelector('html').lang = lang;
     }
 
+    function changeContentFunc() {
+        changeContent.current += 1
+    }
+
     function onClickStartDemo() {
-        setChangeContent(changeContent + 1);
+        changeContentFunc();
         setCurrentContent(
             <>
                 <ContentContainer 
@@ -71,10 +80,9 @@ export const MainPart: React.FC = React.memo(() => {
     } 
 
     function onClickCreateNewDemo() {
-        setChangeContent(changeContent + 1);
+        changeContentFunc();
         setCurrentContent(
             <ContentContainer 
-                // titleText="Демонстрация запущена"
                 titleText={LangDict.demoStartedTitle}
                 descriptText={LangDict.demoStartedDescription}
                 onClickButton={() => onClickConnect()}
@@ -84,8 +92,8 @@ export const MainPart: React.FC = React.memo(() => {
         )            
     }
 
-    function onClickPlaneDemo() {
-        setChangeContent(changeContent + 1);
+    function onClickPlaneDemo() {  
+        // changeContentFunc()
         enableBackground();
         setPlaneContent(
             <PlanContentContainer 
@@ -102,6 +110,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSelectDay(date: {ru: string, en: string}) {
+        changeContentFunc()
         setPlaneContent(
             <PlanContentContainer 
             title={LangDict.selectTime}
@@ -116,6 +125,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSelectTime(date: {ru: string, en: string}, time: string) {
+        changeContentFunc()
         let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`;
         let dateObj = {
             ru: `${date.ru} в ${time}`,
@@ -138,6 +148,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSubmit(data: FormData, date: string) {
+        changeContentFunc();
         setPlaneContent(null);
         setCurrentContent(
             <ContentContainer 
@@ -151,6 +162,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function toMain() {
+        changeContentFunc();
         setCurrentContent(defaultCurrentContent);
         setPlaneContent(null);
         disableBackground();
@@ -169,7 +181,7 @@ export const MainPart: React.FC = React.memo(() => {
         <MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
         <SwitchTransition mode="out-in">
             <CSSTransition
-                key={changeContent}
+                key={changeContent.current}
                 //@ts-ignore
                 addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
                 classNames={'change-main-part-content'}
@@ -181,9 +193,18 @@ export const MainPart: React.FC = React.memo(() => {
         </SwitchTransition>        
         {
             planContent ?
-            <div className="main-part-plan-content">
-                {planContent}
-            </div>
+            <SwitchTransition mode="out-in">
+                <CSSTransition
+                    key={changeContent.current}
+                    //@ts-ignore
+                    addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
+                    classNames={'change-main-part-content'}
+                >
+                <div className="main-part-plan-content">
+                    {planContent}
+                </div>
+            </CSSTransition>
+            </SwitchTransition>
             : null
         }        
         <CSSTransition