New "shazam" CSS effect utility lolol

I might rename this in the future

src/components/account-info.css

@@ -199,17 +199,6 @@
   margin: 0;
 }
 
-.account-container .common-followers {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows 0.5s ease-in-out;
-}
-.account-container .common-followers[hidden] {
-  grid-template-rows: 0fr;
-}
-.account-container .common-followers > .common-followers-inner {
-  overflow: hidden;
-}
 .account-container .common-followers p {
   font-size: 90%;
   color: var(--text-insignificant-color);

src/components/account-info.jsx

@@ -487,8 +487,11 @@ function RelatedActions({ info, instance, authenticated }) {
 
   return (
     <>
-      <div class="common-followers" hidden={!familiarFollowers?.length}>
+      <div
-        <div class="common-followers-inner">
+        class="common-followers shazam-container no-animation"
+        hidden={!familiarFollowers?.length}
+      >
+        <div class="shazam-container-inner">
           <p>
             Also followed by{' '}
             <span class="ib">

src/index.css

@@ -391,3 +391,26 @@ code {
     object-position: 50% 50%;
   }
 }
+
+@keyframes shazam {
+  0% {
+    grid-template-rows: 0fr;
+  }
+  100% {
+    grid-template-rows: 1fr;
+  }
+}
+.shazam-container {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.5s ease-in-out;
+}
+.shazam-container:not(.no-animation) {
+  animation: shazam 0.5s ease-in-out both !important;
+}
+.shazam-container[hidden] {
+  grid-template-rows: 0fr;
+}
+.shazam-container-inner {
+  overflow: hidden;
+}

src/pages/notifications.jsx

@@ -235,44 +235,48 @@ function Notifications() {
           )}
         </header>
         {announcements.length > 0 && (
-          <details class="announcements">
+          <div class="shazam-container">
-            <summary>
+            <div class="shazam-container-inner">
-              <span>
+              <details class="announcements">
-                <Icon icon="announce" class="announcement-icon" size="l" />{' '}
+                <summary>
-                <b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
+                  <span>
-                <small class="insignificant">{instance}</small>
+                    <Icon icon="announce" class="announcement-icon" size="l" />{' '}
-              </span>
+                    <b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
-              {announcements.length > 1 && (
+                    <small class="insignificant">{instance}</small>
-                <span class="announcements-nav-buttons">
+                  </span>
-                  {announcements.map((announcement, index) => (
+                  {announcements.length > 1 && (
-                    <button
+                    <span class="announcements-nav-buttons">
-                      type="button"
+                      {announcements.map((announcement, index) => (
-                      class="plain2 small"
+                        <button
-                      onClick={() => {
+                          type="button"
-                        announcementsListRef.current?.children[
+                          class="plain2 small"
-                          index
+                          onClick={() => {
-                        ].scrollIntoView({ behavior: 'smooth' });
+                            announcementsListRef.current?.children[
-                      }}
+                              index
-                    >
+                            ].scrollIntoView({ behavior: 'smooth' });
-                      {index + 1}
+                          }}
-                    </button>
+                        >
+                          {index + 1}
+                        </button>
+                      ))}
+                    </span>
+                  )}
+                </summary>
+                <ul
+                  class={`announcements-list-${
+                    announcements.length > 1 ? 'multiple' : 'single'
+                  }`}
+                  ref={announcementsListRef}
+                >
+                  {announcements.map((announcement) => (
+                    <li>
+                      <AnnouncementBlock announcement={announcement} />
+                    </li>
                   ))}
-                </span>
+                </ul>
-              )}
+              </details>
-            </summary>
+            </div>
-            <ul
+          </div>
-              class={`announcements-list-${
-                announcements.length > 1 ? 'multiple' : 'single'
-              }`}
-              ref={announcementsListRef}
-            >
-              {announcements.map((announcement) => (
-                <li>
-                  <AnnouncementBlock announcement={announcement} />
-                </li>
-              ))}
-            </ul>
-          </details>
         )}
         {followRequests.length > 0 && (
           <div class="follow-requests">