refactor(message): new message (Tencent#1267)

oljc · May 9, 2023 · d5ff9fb · d5ff9fb
1 parent 0c44f8f
commit d5ff9fb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/docs/mobile/api/message.md b/docs/mobile/api/message.md
@@ -8,7 +8,7 @@ toc: false
 
 ### 基础消息通知
 
-弹窗内容为纯文本、标题和副标题、带操作按钮。
+用于轻量级反馈或提示，不会打断用户操作。
 
 
 {{ base }}

diff --git a/docs/mobile/api_v2/message.md b/docs/mobile/api_v2/message.md
@@ -8,7 +8,7 @@ toc: false
 
 ### 基础消息通知
 
-弹窗内容为纯文本、标题和副标题、带操作按钮。
+用于轻量级反馈或提示，不会打断用户操作。
 
 
 {{ base }}

diff --git a/style/mobile/components/message/v2/_index.less b/style/mobile/components/message/v2/_index.less
@@ -37,6 +37,11 @@
     white-space: nowrap;
   }
 
+  &__close-wrap {
+    display: flex;
+    align-items: center;
+  }
+
   &--info {
     color: @message-info-color;
   }
@@ -72,3 +77,31 @@
     margin-left: @spacer;
   }
 }
+
+.message-enter-active {
+  animation: messageEnter .5s;
+}
+
+.message-leave-active {
+  animation: messageOut .2s;
+}
+
+@keyframes messageEnter {
+  from {
+    transform: translate3d(0, -@message-height, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes messageOut {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, -@message-height, 0);
+  }
+}