From 4cbbce15f43e94838b7bf40b2d0b397d3cfe728d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 5 Mar 2024 12:58:07 +0800
Subject: [PATCH] feat: add animation for emoji panel (#85)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为 Emoji 选择组件添加展开动画。

/kind improvement

```release-note
None
```
---
 packages/comment-widget/src/emoji-button.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/comment-widget/src/emoji-button.ts b/packages/comment-widget/src/emoji-button.ts
index a3ee9ce..bcd4271 100644
--- a/packages/comment-widget/src/emoji-button.ts
+++ b/packages/comment-widget/src/emoji-button.ts
@@ -129,6 +129,7 @@ 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) {
@@ -136,6 +137,18 @@ export class EmojiButton extends LitElement {
           right: -7.8em;
         }
       }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translate3d(0, 5%, 0);
+        }
+
+        to {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+        }
+      }
     `,
   ];
 }