enhancement/Issue-99: Refactor keyframes to be a transition (#109)

ProjectEvergreen · Oct 17, 2024 · 8f68459 · 8f68459
1 parent 2f38f36
commit 8f68459
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 28 deletions.
diff --git a/src/components/side-nav/side-nav.module.css b/src/components/side-nav/side-nav.module.css
@@ -34,24 +34,15 @@
 
   & #indicator {
     display: inline-block;
+    transition: transform 1s ease;
   }
 }
 
-.compactMenu:has(#compact-menu:popover-open) {
-  & #indicator {
-    animation: rotateindicatoropen 1s ease;
-    animation-fill-mode: forwards;
-  }
+.compactMenu:not(:has(#compact-menu:popover-open)) #indicator {
+  transform: rotate(0deg);
 }
-
-@keyframes rotateindicatoropen {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
+.compactMenu:has(#compact-menu:popover-open) #indicator {
+  transform: rotate(180deg);
 }
 
 .compactMenuPopover {

diff --git a/src/components/table-of-contents/table-of-contents.module.css b/src/components/table-of-contents/table-of-contents.module.css
@@ -40,24 +40,15 @@
 
   & #indicator {
     display: inline-block;
+    transition: transform 1s ease;
   }
 }
 
-.compactMenu:has(#onthispage:popover-open) {
-  & #indicator {
-    animation: rotateindicatoropen 1s ease;
-    animation-fill-mode: forwards;
-  }
+.compactMenu:not(:has(#onthispage:popover-open)) #indicator {
+  transform: rotate(0deg);
 }
-
-@keyframes rotateindicatoropen {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
+.compactMenu:has(#onthispage:popover-open) #indicator {
+  transform: rotate(180deg);
 }
 
 .compactMenuItem {