Skip to main content

shadow_design/
animation.rs

1use dioxus::prelude::*;
2
3/// Varianti di animazione per componenti interattivi, toast, modali e dialoghi.
4#[derive(Clone, Copy, PartialEq, Debug, Default)]
5pub enum AnimationVariant {
6    #[default]
7    FadeIn,
8    FadeOut,
9    SlideInRight,
10    SlideInLeft,
11    SlideInBottom,
12    SlideInTop,
13    ScaleIn,
14    ModalEnter,
15    ToastEnter,
16    ToastExit,
17    DropdownEnter,
18    DrawerSlideLeft,
19    DrawerSlideRight,
20    PulseGlow,
21    TactilePress,
22    Spin,
23    Indeterminate,
24}
25
26impl AnimationVariant {
27    pub fn classes(&self) -> &'static str {
28        match self {
29            AnimationVariant::FadeIn => "animate-fade-in",
30            AnimationVariant::FadeOut => "animate-fade-out",
31            AnimationVariant::SlideInRight => "animate-slide-in-right",
32            AnimationVariant::SlideInLeft => "animate-slide-in-left",
33            AnimationVariant::SlideInBottom => "animate-slide-in-bottom",
34            AnimationVariant::SlideInTop => "animate-slide-in-top",
35            AnimationVariant::ScaleIn => "animate-scale-in",
36            AnimationVariant::ModalEnter => "animate-modal-enter",
37            AnimationVariant::ToastEnter => "animate-toast-enter",
38            AnimationVariant::ToastExit => "animate-toast-exit",
39            AnimationVariant::DropdownEnter => "animate-dropdown-enter",
40            AnimationVariant::DrawerSlideLeft => "animate-drawer-slide-left",
41            AnimationVariant::DrawerSlideRight => "animate-drawer-slide-right",
42            AnimationVariant::PulseGlow => "animate-pulse-glow",
43            AnimationVariant::TactilePress => "tactile-press select-none cursor-pointer",
44            AnimationVariant::Spin => "animate-spin",
45            AnimationVariant::Indeterminate => "animate-indeterminate",
46        }
47    }
48}
49
50/// Helper di transizione e animazione per Dioxus.
51#[component]
52pub fn Transition(
53    #[props(default)] variant: AnimationVariant,
54    #[props(default)] class: String,
55    children: Element,
56) -> Element {
57    let anim_class = variant.classes();
58    rsx! {
59        div {
60            class: "{anim_class} {class}",
61            {children}
62        }
63    }
64}
65
66/// Costanti e classi standard di animazione esposte dalla libreria.
67pub struct Animations;
68
69impl Animations {
70    pub const FADE_IN: &'static str = "animate-fade-in";
71    pub const FADE_OUT: &'static str = "animate-fade-out";
72    pub const SLIDE_IN_RIGHT: &'static str = "animate-slide-in-right";
73    pub const SLIDE_IN_LEFT: &'static str = "animate-slide-in-left";
74    pub const SLIDE_IN_BOTTOM: &'static str = "animate-slide-in-bottom";
75    pub const SLIDE_IN_TOP: &'static str = "animate-slide-in-top";
76    pub const SCALE_IN: &'static str = "animate-scale-in";
77    pub const TOAST_ENTER: &'static str = "animate-toast-enter";
78    pub const TOAST_EXIT: &'static str = "animate-toast-exit";
79    pub const MODAL_ENTER: &'static str = "animate-modal-enter";
80    pub const DRAWER_LEFT: &'static str = "animate-drawer-slide-left";
81    pub const DRAWER_RIGHT: &'static str = "animate-drawer-slide-right";
82    pub const DROPDOWN_ENTER: &'static str = "animate-dropdown-enter";
83    pub const PULSE_GLOW: &'static str = "animate-pulse-glow";
84    pub const SPIN: &'static str = "animate-spin";
85    pub const INDETERMINATE: &'static str = "animate-indeterminate";
86    pub const TACTILE: &'static str = "tactile-press";
87}