shadow_design/
animation.rs1use dioxus::prelude::*;
2
3#[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#[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
66pub 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}