Feat/binder animation (#131)

* feat: Popover adds animation

* feat: ColorPicker adds animation

* feat: AutoComplete adds animation

* feat: Select adds animation

* feat: DatePicker adds animation

* feat: TimePicker adds animation

thaw/src/auto_complete/auto-complete.css

@@ -18,3 +18,31 @@
 .thaw-auto-complete__menu-item--selected {
     background-color: var(--thaw-background-color-hover);
 }
+
+.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
+        transform 0.2s cubic-bezier(0.4, 0, 1, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+        transform 0.2s cubic-bezier(0, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-from,
+.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-from,
+.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}

thaw/src/auto_complete/mod.rs

@@ -1,7 +1,7 @@
 mod theme;
 
 use crate::{
-    components::{Binder, Follower, FollowerPlacement, FollowerWidth},
+    components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth},
     use_theme,
     utils::{class_list::class_list, mount_style, Model, OptionalProp, StoredMaybeSignal},
     ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme,
@@ -195,10 +195,16 @@ pub fn AutoComplete(
                 show=is_show_menu
                 placement=FollowerPlacement::BottomStart
                 width=FollowerWidth::Target
+            >
+                <CSSTransition
+                    node_ref=menu_ref
+                    name="fade-in-scale-up-transition"
+                    show=is_show_menu
+                    let:display
                 >
                     <div
                         class="thaw-auto-complete__menu"
-                    style=move || menu_css_vars.get()
+                        style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| menu_css_vars.get())
                         ref=menu_ref
                     >
 
@@ -259,6 +265,7 @@ pub fn AutoComplete(
                         }}
 
                     </div>
+                </CSSTransition>
             </Follower>
         </Binder>
     }

thaw/src/color_picker/color-picker.css

@@ -89,3 +89,27 @@
     border: 2px solid white;
     cursor: pointer;
 }
+
+.thaw-color-picker-popover.fade-in-scale-up-transition-leave-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
+        transform 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.thaw-color-picker-popover.fade-in-scale-up-transition-enter-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+        transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.thaw-color-picker-popover.fade-in-scale-up-transition-enter-from,
+.thaw-color-picker-popover.fade-in-scale-up-transition-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.thaw-color-picker-popover.fade-in-scale-up-transition-leave-from,
+.thaw-color-picker-popover.fade-in-scale-up-transition-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}

thaw/src/color_picker/mod.rs

@@ -5,7 +5,7 @@ pub use color::*;
 pub use theme::ColorPickerTheme;
 
 use crate::{
-    components::{Binder, Follower, FollowerPlacement},
+    components::{Binder, CSSTransition, Follower, FollowerPlacement},
     use_theme,
     utils::{class_list::class_list, mount_style, Model, OptionalProp},
     Theme,
@@ -152,15 +152,21 @@ pub fn ColorPicker(
                 </div>
             </div>
             <Follower slot show=is_show_popover placement=FollowerPlacement::BottomStart>
+                <CSSTransition
+                    node_ref=popover_ref name="fade-in-scale-up-transition"
+                    show=is_show_popover
+                    let:display
+                >
                     <div
                         class="thaw-color-picker-popover"
                         ref=popover_ref
-                    style=move || popover_css_vars.get()
+                        style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| popover_css_vars.get())
                     >
 
                         <ColorPanel hue=hue.read_only() sv/>
                         <HueSlider hue/>
                     </div>
+                </CSSTransition>
             </Follower>
         </Binder>
     }

thaw/src/components/binder/get_placement_style.rs

@@ -36,6 +36,23 @@ impl FollowerPlacement {
             Self::BottomEnd => "bottom-end",
         }
     }
+
+    pub fn transform_origin(&self) -> &'static str {
+        match self {
+            Self::Top => "bottom center",
+            Self::Bottom => "top center",
+            Self::Left => "center right",
+            Self::Right => "center left",
+            Self::TopStart => "bottom left",
+            Self::TopEnd => "bottom right",
+            Self::LeftStart => "top right",
+            Self::LeftEnd => "bottom right",
+            Self::RightStart => "top left",
+            Self::RightEnd => "bottom left",
+            Self::BottomStart => "top left",
+            Self::BottomEnd => "top right",
+        }
+    }
 }
 
 pub struct FollowerPlacementOffset {

thaw/src/components/binder/mod.rs

@@ -34,7 +34,6 @@ pub enum FollowerWidth {
 
 impl Copy for FollowerWidth {}
 
-
 /// # Tracking popup
 ///
 /// ```rust
@@ -58,7 +57,8 @@ impl Copy for FollowerWidth {}
 #[component]
 pub fn Binder<El: ElementDescriptor + Clone + 'static>(
     /// Used to track DOM locations
-    #[prop(into)] target_ref: NodeRef<El>,
+    #[prop(into)]
+    target_ref: NodeRef<El>,
     /// Content for pop-up display
     follower: Follower,
     children: Children,
@@ -197,6 +197,10 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
         }) = get_follower_placement_offset(placement, target_rect, content_rect)
         {
             placement_str.set(placement.as_str());
+            style.push_str(&format!(
+                "transform-origin: {};",
+                placement.transform_origin()
+            ));
             style.push_str(&format!(
                 "transform: translateX({left}px) translateY({top}px) {transform};"
             ));
@@ -207,15 +211,14 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
         content_style.set(style);
     });
 
-    let is_show = create_memo(move |_| {
+    Effect::new(move |_| {
         if target_ref.get().is_none() {
-            return false;
+            return;
         }
         if content_ref.get().is_none() {
-            return false;
+            return;
         }
-        let is_show = show.get();
+        if show.get() {
-        if is_show {
             request_animation_frame(move || {
                 sync_position.call(());
             });
@@ -225,14 +228,10 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
             remove_scroll_listener.call(());
             remove_resize_listener.call(());
         }
-        is_show
     });
 
     let children = with_hydration_off(|| {
-        html::div()
+        html::div().classes("thaw-binder-follower-container").child(
-            .classes("thaw-binder-follower-container")
-            .style("display", move || (!is_show.get()).then_some("none"))
-            .child(
             html::div()
                 .classes("thaw-binder-follower-content")
                 .attr("data-thaw-placement", move || placement_str.get())

thaw/src/date_picker/date-picker.css

@@ -172,3 +172,27 @@
     text-align: center;
     border-radius: 3px;
 }
+
+.thaw-date-picker-panel.fade-in-scale-up-transition-leave-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
+        transform 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.thaw-date-picker-panel.fade-in-scale-up-transition-enter-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+        transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.thaw-date-picker-panel.fade-in-scale-up-transition-enter-from,
+.thaw-date-picker-panel.fade-in-scale-up-transition-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.thaw-date-picker-panel.fade-in-scale-up-transition-leave-from,
+.thaw-date-picker-panel.fade-in-scale-up-transition-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}

thaw/src/date_picker/mod.rs

@@ -87,6 +87,7 @@ pub fn DatePicker(
                     close_panel
                     selected_date=panel_selected_date
                     comp_ref=panel_ref
+                    is_show_panel
                 />
             </Follower>
         </Binder>

thaw/src/date_picker/panel/mod.rs

@@ -3,6 +3,7 @@ mod month_panel;
 mod year_panel;
 
 use crate::{
+    components::CSSTransition,
     use_theme,
     utils::{now_date, ComponentRef},
     Theme,
@@ -18,6 +19,7 @@ pub fn Panel(
     selected_date: RwSignal<Option<NaiveDate>>,
     date_picker_ref: NodeRef<html::Div>,
     close_panel: Callback<Option<NaiveDate>>,
+    #[prop(into)] is_show_panel: MaybeSignal<bool>,
     #[prop(optional)] comp_ref: ComponentRef<PanelRef>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -91,7 +93,17 @@ pub fn Panel(
     });
 
     view! {
-        <div class="thaw-date-picker-panel" style=move || css_vars.get() ref=panel_ref>
+        <CSSTransition
+            node_ref=panel_ref
+            name="fade-in-scale-up-transition"
+            show=is_show_panel
+            let:display
+        >
+            <div
+                class="thaw-date-picker-panel"
+                style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
+                ref=panel_ref
+            >
 
                 {move || {
                     match panel_variant.get() {
@@ -110,6 +122,7 @@ pub fn Panel(
                 }}
 
             </div>
+        </CSSTransition>
     }
 }
 

thaw/src/popover/mod.rs

@@ -1,14 +1,15 @@
 mod theme;
 
+pub use theme::PopoverTheme;
+
 use crate::{
-    components::{Binder, Follower, FollowerPlacement},
+    components::{Binder, CSSTransition, Follower, FollowerPlacement},
     use_theme,
     utils::{add_event_listener, class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::{leptos_dom::helpers::TimeoutHandle, *};
 use std::time::Duration;
-pub use theme::PopoverTheme;
 
 #[slot]
 pub struct PopoverTrigger {
@@ -112,6 +113,7 @@ pub fn Popover(
         children: trigger_children,
     } = popover_trigger;
 
+    let follower_enabled = RwSignal::new(false);
     view! {
         <Binder target_ref>
             <div
@@ -122,10 +124,17 @@ pub fn Popover(
             >
                 {trigger_children()}
             </div>
-            <Follower slot show=is_show_popover placement>
+            <Follower slot show=follower_enabled placement>
+                <CSSTransition
+                    node_ref=popover_ref name="popover-transition"
+                    show=is_show_popover
+                    on_enter=move |_| follower_enabled.set(true)
+                    on_after_leave=move |_| follower_enabled.set(false)
+                    let:display
+                >
                     <div
                         class="thaw-popover"
-                    style=move || css_vars.get()
+                        style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
                         ref=popover_ref
                         on:mouseenter=on_mouse_enter
                         on:mouseleave=on_mouse_leave
@@ -135,6 +144,7 @@ pub fn Popover(
                             <div class="thaw-popover__angle"></div>
                         </div>
                     </div>
+                </CSSTransition>
             </Follower>
         </Binder>
     }

thaw/src/popover/popover.css

@@ -3,6 +3,7 @@
     padding: 8px 14px;
     background-color: var(--thaw-background-color);
     border-radius: 3px;
+    transform-origin: inherit;
 }
 
 .thaw-popover-trigger {
@@ -138,3 +139,31 @@
     top: initial;
     bottom: 7px;
 }
+
+.thaw-popover.popover-transition-enter-from,
+.thaw-popover.popover-transition-leave-to {
+    opacity: 0;
+    transform: scale(0.85);
+}
+
+.thaw-popover.popover-transition-enter-to,
+.thaw-popover.popover-transition-leave-from {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.thaw-popover.popover-transition-enter-active {
+    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.15s cubic-bezier(0, 0, 0.2, 1),
+        transform 0.15s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.thaw-popover.popover-transition-leave-active {
+    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
+        transform 0.15s cubic-bezier(0.4, 0, 1, 1);
+}

thaw/src/select/mod.rs

@@ -1,7 +1,7 @@
 mod theme;
 
 use crate::{
-    components::{Binder, Follower, FollowerPlacement, FollowerWidth},
+    components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth},
     theme::use_theme,
     utils::{class_list::class_list, mount_style, Model, OptionalProp},
     Theme,
@@ -126,7 +126,17 @@ where
                 placement=FollowerPlacement::BottomStart
                 width=FollowerWidth::Target
             >
-                <div class="thaw-select-menu" style=move || menu_css_vars.get() ref=menu_ref>
+                <CSSTransition
+                    node_ref=menu_ref
+                    name="fade-in-scale-up-transition"
+                    show=is_show_menu
+                    let:display
+                >
+                    <div
+                        class="thaw-select-menu"
+                        style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| menu_css_vars.get())
+                        ref=menu_ref
+                    >
                         <For
                             each=move || options.get()
                             key=move |item| item.value.clone()
@@ -154,6 +164,7 @@ where
                         />
 
                     </div>
+                </CSSTransition>
             </Follower>
         </Binder>
     }

thaw/src/select/select.css

@@ -42,3 +42,31 @@
 .thaw-select-menu__item-selected {
     color: var(--thaw-font-color-selected);
 }
+
+.thaw-select-menu.fade-in-scale-up-transition-leave-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
+        transform 0.2s cubic-bezier(0.4, 0, 1, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.thaw-select-menu.fade-in-scale-up-transition-enter-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+        transform 0.2s cubic-bezier(0, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.thaw-select-menu.fade-in-scale-up-transition-enter-from,
+.thaw-select-menu.fade-in-scale-up-transition-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.thaw-select-menu.fade-in-scale-up-transition-leave-from,
+.thaw-select-menu.fade-in-scale-up-transition-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}

thaw/src/time_picker/mod.rs

@@ -3,7 +3,7 @@ mod theme;
 pub use theme::TimePickerTheme;
 
 use crate::{
-    components::{Binder, Follower, FollowerPlacement},
+    components::{Binder, CSSTransition, Follower, FollowerPlacement},
     use_theme,
     utils::{mount_style, ComponentRef, Model, OptionalProp},
     Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
@@ -86,6 +86,7 @@ pub fn TimePicker(
                     selected_time=panel_selected_time
                     close_panel
                     time_picker_ref
+                    is_show_panel
                     comp_ref=panel_ref
                 />
             </Follower>
@@ -98,6 +99,7 @@ fn Panel(
     selected_time: RwSignal<Option<NaiveTime>>,
     time_picker_ref: NodeRef<html::Div>,
     close_panel: Callback<Option<NaiveTime>>,
+    #[prop(into)] is_show_panel: MaybeSignal<bool>,
     comp_ref: ComponentRef<PanelRef>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -173,7 +175,17 @@ fn Panel(
     });
 
     view! {
-        <div class="thaw-time-picker-panel" style=move || css_vars.get() ref=panel_ref>
+        <CSSTransition
+            node_ref=panel_ref
+            name="fade-in-scale-up-transition"
+            show=is_show_panel
+            let:display
+        >
+            <div
+                class="thaw-time-picker-panel"
+                style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
+                ref=panel_ref
+            >
                 <div class="thaw-time-picker-panel__time">
                     <div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
 
@@ -263,6 +275,7 @@ fn Panel(
                     </Button>
                 </div>
             </div>
+        </CSSTransition>
     }
 }
 

thaw/src/time_picker/time-picker.css

@@ -51,3 +51,27 @@
     align-items: center;
     border-top: 1px solid var(--thaw-item-border-color);
 }
+
+.thaw-time-picker-panel.fade-in-scale-up-transition-leave-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
+        transform 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.thaw-time-picker-panel.fade-in-scale-up-transition-enter-active {
+    transform-origin: inherit;
+    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+        transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.thaw-time-picker-panel.fade-in-scale-up-transition-enter-from,
+.thaw-time-picker-panel.fade-in-scale-up-transition-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.thaw-time-picker-panel.fade-in-scale-up-transition-leave-from,
+.thaw-time-picker-panel.fade-in-scale-up-transition-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}