feat: add animation for emoji panel

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Mar 5, 2024 · 766b22e · 766b22e
1 parent 5bc1867
commit 766b22e
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/comment-widget/src/emoji-button.ts b/packages/comment-widget/src/emoji-button.ts
@@ -129,13 +129,26 @@ export class EmojiButton extends LitElement {
         box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
         border-radius: 0.875em;
         overflow: hidden;
+        animation: fadeInUp 0.3s both;
       }
 
       @media (max-width: 640px) {
         .form__emoji-panel {
           right: -7.8em;
         }
       }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translate3d(0, 5%, 0);
+        }
+
+        to {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+        }
+      }
     `,
   ];
 }