try animate change content container

2022-07-25 18:09:10 +05:30
parent 3a53ad9e8c
commit 7d28bb5054
2 changed files with 52 additions and 12 deletions
@@ -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);
 }