diff --git a/docs/mobile/api/message.md b/docs/mobile/api/message.md index e9a2001215..7c3f0f2b60 100644 --- 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 index e9a2001215..7c3f0f2b60 100644 --- 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 index 0ae53178bc..09586ffb83 100644 --- 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); + } +}