From f6e8b1e4ca247ae469d78868f46f4455252a411f Mon Sep 17 00:00:00 2001
From: HaixingOoO <974758671@qq.com>
Date: Mon, 25 Dec 2023 22:21:13 +0800
Subject: [PATCH 1/2] feat(message): add message animation

---
 style/web/components/message/_index.less | 51 ++++++++++++++++++++++++
 style/web/components/message/_var.less   |  2 +
 2 files changed, 53 insertions(+)

diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less
index 087ccaf05e..be8b877e37 100644
--- a/style/web/components/message/_index.less
+++ b/style/web/components/message/_index.less
@@ -65,6 +65,57 @@
       }
     }
   }
+
+  // Message动画
+  @keyframes tMessageAnimation {
+    0% {
+      opacity: 0;
+      transform: translateY(-50px);
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+  .animation-enter {
+    animation-duration: @message-anim-duration;
+    animation-fill-mode: both;
+    animation-timing-function: ease;
+    animation-play-state: paused;
+  }
+
+  .animation-exit {
+    animation-duration: @message-anim-duration;
+    animation-fill-mode: both;
+    animation-timing-function: ease;
+    animation-play-state: paused;
+    animation-direction: reverse;
+  }
+
+  .animation-active {
+    animation-play-state: running;
+    animation-fill-mode: both;
+  }
+  &-enter,
+  &-enter-from,
+  &-appear {
+    .animation-enter;
+  }
+
+  &-exit {
+    .animation-exit;
+  }
+
+  &-enter-active,
+  &-appear-active {
+    animation-name: tMessageIn;
+    .animation-active;
+  }
+
+  &-exit-active {
+    animation-name: tMessageIn;
+    .animation-active;
+  }
 }
 
 .@{prefix}-message__list {
diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less
index d9b579dab4..31e3c11cec 100644
--- a/style/web/components/message/_var.less
+++ b/style/web/components/message/_var.less
@@ -46,3 +46,5 @@
 
 // Angular Icon 组件会多一层容器，这层容器用 [data-t-icon] 命中
 @msg-icon-selector: ~"> .t-icon, > [data-@{prefix}-icon] > .t-icon, .@{prefix}-loading";
+
+@message-anim-duration: @anim-duration-base;
\ No newline at end of file

From f7267adaebfe2fd36950cd682fa50baa14ffe665 Mon Sep 17 00:00:00 2001
From: HaixingOoO <974758671@qq.com>
Date: Mon, 25 Dec 2023 22:34:45 +0800
Subject: [PATCH 2/2] feat(message): update lint css

---
 style/web/components/message/_index.less | 2 ++
 style/web/components/message/_var.less   | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less
index be8b877e37..4873a992ca 100644
--- a/style/web/components/message/_index.less
+++ b/style/web/components/message/_index.less
@@ -77,6 +77,7 @@
       opacity: 1;
     }
   }
+
   .animation-enter {
     animation-duration: @message-anim-duration;
     animation-fill-mode: both;
@@ -96,6 +97,7 @@
     animation-play-state: running;
     animation-fill-mode: both;
   }
+
   &-enter,
   &-enter-from,
   &-appear {
diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less
index 31e3c11cec..1620eeb673 100644
--- a/style/web/components/message/_var.less
+++ b/style/web/components/message/_var.less
@@ -47,4 +47,4 @@
 // Angular Icon 组件会多一层容器，这层容器用 [data-t-icon] 命中
 @msg-icon-selector: ~"> .t-icon, > [data-@{prefix}-icon] > .t-icon, .@{prefix}-loading";
 
-@message-anim-duration: @anim-duration-base;
\ No newline at end of file
+@message-anim-duration: @anim-duration-base;