feat: Message adds animation

thaw/src/message/message.css

@@ -35,7 +35,7 @@
     right: 12px;
 }
 
-.thaw-message-container--top-left{
+.thaw-message-container--top-left {
     align-items: start;
     top: 12px;
     left: 12px;
@@ -52,6 +52,37 @@
 .thaw-message-wrapper {
     margin-bottom: 8px;
     position: relative;
+    transform-origin: top center;
+}
+
+.thaw-message-wrapper.fade-in-height-expand-transition-leave-from,
+.thaw-message-wrapper.fade-in-height-expand-transition-enter-to {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.thaw-message-wrapper.fade-in-height-expand-transition-leave-to,
+.thaw-message-wrapper.fade-in-height-expand-transition-enter-from {
+    transform: scale(0.85);
+    opacity: 0;
+    margin-bottom: 0 !important;
+    max-height: 0 !important;
+}
+
+.thaw-message-wrapper.fade-in-height-expand-transition-leave-active {
+    overflow: visible;
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s,
+        opacity 0.3s cubic-bezier(0, 0, 0.2, 1) 0s,
+        margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s,
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.thaw-message-wrapper.fade-in-height-expand-transition-enter-active {
+    overflow: visible;
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.3s cubic-bezier(0.4, 0, 1, 1),
+        margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .thaw-message {

thaw/src/message/mod.rs

@@ -6,7 +6,7 @@ pub use theme::MessageTheme;
 
 use crate::{theme::use_theme, Icon, Theme};
 use leptos::*;
-use thaw_components::{If, Then};
+use thaw_components::{CSSTransition, If, Then};
 use uuid::Uuid;
 
 #[derive(Default, Clone)]
@@ -37,11 +37,13 @@ impl MessageVariant {
 #[component]
 fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) -> impl IntoView {
     let (id, content, variant, MessageOptions { duration, closable }) = message;
+    let is_show = RwSignal::new(true);
+    let message_ref = NodeRef::<html::Div>::new();
 
     if !duration.is_zero() {
         set_timeout(
             move || {
-                on_close.call(id);
+                is_show.set(false);
             },
             duration,
         );
@@ -59,21 +61,46 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
         css_vars
     });
     let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
+
+    let on_before_leave = move |_| {
+        let Some(node_el) = message_ref.get() else {
+            return;
+        };
+        use std::ops::Deref;
+        let any_el = node_el.into_any();
+        let el = any_el.deref();
+        let style = el.style();
+        let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
+    };
+    let on_after_leave = move |_| {
+        queue_microtask(move || on_close.call(id));
+    };
+
     view! {
-        <div class="thaw-message-wrapper">
+        <CSSTransition
-            <div class="thaw-message" style=move || css_vars.get()>
+            node_ref=message_ref
-                <div class="thaw-message__icon">
+            name="fade-in-height-expand-transition"
-                    <Icon icon=variant.icon() style/>
+            show=is_show
+            appear=true
+            on_before_leave=on_before_leave
+            on_after_leave=on_after_leave
+            let:_
+        >
+            <div class="thaw-message-wrapper" ref=message_ref>
+                <div class="thaw-message" style=move || css_vars.get()>
+                    <div class="thaw-message__icon">
+                        <Icon icon=variant.icon() style/>
+                    </div>
+                    <div class="thaw-message__content">{content}</div>
+                    <If cond=closable>
+                        <Then slot>
+                            <div class="thaw-message__close" on:click=move |_| is_show.set(false)>
+                                <Icon icon=icondata_ai::AiCloseOutlined/>
+                            </div>
+                        </Then>
+                    </If>
                 </div>
-                <div class="thaw-message__content">{content}</div>
-                <If cond=closable>
-                    <Then slot>
-                        <div class="thaw-message__close" on:click=move |_| on_close.call(id)>
-                            <Icon icon=icondata_ai::AiCloseOutlined/>
-                        </div>
-                    </Then>
-                </If>
             </div>
-        </div>
+        </CSSTransition>
     }
 }