add animation for detail

LuuNa-JD · Oct 21, 2024 · 70b802b · 70b802b
1 parent 7efed76
commit 70b802b
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/_includes/sections/career.html b/_includes/sections/career.html
@@ -70,12 +70,25 @@ <h4>Technologies utilisées :</h4>
 
   .details {
     display: none;
-    animation: fadeIn 0.5s;
+    overflow: hidden;
+  }
+
+  .show-details {
+    animation: fadeIn 0.5s forwards;
+  }
+
+  .hide-details {
+    animation: fadeOut 0.5s forwards;
   }
 
   @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from { opacity: 0; max-height: 0; }
+    to { opacity: 1; max-height: 1000px; }
+  }
+
+  @keyframes fadeOut {
+    from { opacity: 1; max-height: 1000px; }
+    to { opacity: 0; max-height: 0; }
   }
 
   .rotate-up {
@@ -97,10 +110,13 @@ <h4>Technologies utilisées :</h4>
 
   if (details.style.display === "none" || details.style.display === "") {
     details.style.display = "block";
-    details.style.animation = "fadeIn 0.5s";
+    details.classList.remove('hide-details');
+    details.classList.add('show-details');
     icon.classList.add('rotate-up');
   } else {
-    details.style.display = "none";
+    details.classList.remove('show-details');
+    details.classList.add('hide-details');
+    setTimeout(() => { details.style.display = "none"; }, 500);
     icon.classList.remove('rotate-up');
   }
 }