Delay the hover appearance of preview card (#14222)

* delay the hover appearance of preview card

* don't run animation if the dropdown is already held open by click

* wake up travis

* Trigger Travis CI

* remove unncessary document queries

app/assets/stylesheets/profile-preview-card.scss

@@ -8,9 +8,33 @@
 
   &__content.crayons-dropdown:hover {
     display: block;
+    animation: hoverAppear 500ms;
+
+    &.showing {
+      animation: none;
+    }
   }
 
   &__trigger:hover + .profile-preview-card__content.crayons-dropdown {
     display: block;
+    animation: hoverAppear 500ms;
+
+    &.showing {
+      animation: none;
+    }
+  }
+
+  @keyframes hoverAppear {
+    0% {
+      opacity: var(--opacity-0);
+    }
+
+    99% {
+      opacity: var(--opacity-0);
+    }
+
+    100% {
+      opacity: var(--opacity-100);
+    }
   }
 }

app/javascript/packs/articlePage.jsx

@@ -168,10 +168,19 @@ actionsContainer.addEventListener('click', async (event) => {
 const profilePreviewTrigger = document.getElementById(
   'profile-preview-trigger',
 );
+
+const dropdownContent = document.getElementById('profile-preview-content');
+
 if (profilePreviewTrigger?.dataset.initialized !== 'true') {
   initializeDropdown({
     triggerElementId: 'profile-preview-trigger',
     dropdownContentId: 'profile-preview-content',
+    onOpen: () => {
+      dropdownContent?.classList.add('showing');
+    },
+    onClose: () => {
+      dropdownContent?.classList.remove('showing');
+    },
   });
 
   profilePreviewTrigger.dataset.initialized = 'true';

app/javascript/packs/commentDropdowns.js

@@ -26,6 +26,10 @@ const initializeArticlePageDropdowns = () => {
       continue;
     }
 
+    const isProfilePreview = dropdownTrigger.id.includes(
+      'comment-profile-preview-trigger',
+    );
+
     const dropdownContentId = dropdownTrigger.getAttribute('aria-controls');
     const dropdownElement = document.getElementById(dropdownContentId);
 
@@ -33,6 +37,16 @@ const initializeArticlePageDropdowns = () => {
       const { closeDropdown } = initializeDropdown({
         triggerElementId: dropdownTrigger.id,
         dropdownContentId,
+        onOpen: () => {
+          if (isProfilePreview) {
+            dropdownElement?.classList.add('showing');
+          }
+        },
+        onClose: () => {
+          if (isProfilePreview) {
+            dropdownElement?.classList.remove('showing');
+          }
+        },
       });
 
       // Add actual link location (SEO doesn't like these "useless" links, so adding in here instead of in HTML)