fix: Drawer cannot be closed when the placement is changed

Author: luoxiaozero

demo/src/components/syntect-css.css

@@ -1,5 +1,10 @@
 /** https://github.com/AmjadHD/sublime_one_theme */
 
+.syntect-comment {
+    font-style: italic;
+    color: hsl(220, 10%, 40%);
+}
+
 /** light */
 
 .color-scheme--light .syntect-support.syntect-function,

demo_markdown/docs/drawer/mod.md

@@ -5,6 +5,8 @@ let show = create_rw_signal(false);
 let placement = create_rw_signal(DrawerPlacement::Top);
 
 let open = Callback::new(move |new_placement: DrawerPlacement| {
+    // Note: Since `show` changes are made in real time,
+    // please put it in front of `show.set(true)` when changing `placement`.
     placement.set(new_placement);
     show.set(true);
 });

thaw/src/components/css_transition/mod.rs

@@ -7,6 +7,7 @@ pub fn CSSTransition<T, CF, IV>(
     #[prop(into)] show: MaybeSignal<bool>,
     #[prop(into)] name: MaybeSignal<String>,
     #[prop(optional, into)] on_enter: Option<Callback<()>>,
+    #[prop(optional, into)] on_after_enter: Option<Callback<()>>,
     #[prop(optional, into)] on_after_leave: Option<Callback<()>>,
     children: CF,
 ) -> impl IntoView
@@ -28,6 +29,9 @@ where
                     match class {
                         RemoveClassName::Enter(active, to) => {
                             let _ = class_list.remove_2(&active, &to);
+                            if let Some(on_after_enter) = on_after_enter {
+                                on_after_enter.call(());
+                            }
                         }
                         RemoveClassName::Leave(active, to) => {
                             let _ = class_list.remove_2(&active, &to);

thaw/src/drawer/mod.rs

@@ -40,15 +40,29 @@ pub fn Drawer(
         let mask_ref = NodeRef::<html::Div>::new();
         let drawer_ref = NodeRef::<html::Div>::new();
 
+        let is_css_transition = RwSignal::new(false);
+        let placement = Memo::new(move |_| {
+            if is_css_transition.get() {
+                placement.get_untracked().as_str()
+            } else {
+                placement.get_untracked().as_str()
+            }
+        });
+        let on_after_enter = move |_| {
+            is_css_transition.set(false);
+        };
+
         let is_lock = RwSignal::new(show.get_untracked());
         Effect::new(move |_| {
             if show.get() {
                 is_lock.set(true);
+                is_css_transition.set(true);
             }
         });
         use_lock_html_scroll(is_lock.into());
         let on_after_leave = move |_| {
             is_lock.set(false);
+            is_css_transition.set(false);
         };
 
         view! {
@@ -70,15 +84,17 @@ pub fn Drawer(
                     node_ref=drawer_ref
                     show=show.signal()
                     name=Memo::new(move |_| {
-                        format!("slide-in-from-{}-transition", placement.get().as_str())
+                        format!("slide-in-from-{}-transition", placement.get())
                     })
+
+                    on_after_enter
                     on_after_leave
                     let:display
                 >
                     <div
                         class=class_list![
                             "thaw-drawer", move || format!("thaw-drawer--placement-{}", placement
-                            .get().as_str()), class.map(| c | move || c.get())
+                            .get()), class.map(| c | move || c.get())
                         ]
 
                         style=move || display.get()