leptos_animate 0.1.14

Animation utilities for Leptos. FLIP, in/out transitions, and helpers for custom animations.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

use std::{future::Future, pin::Pin, rc::Rc, time::Duration};

use leptos::task::spawn_local;
use send_wrapper::SendWrapper;
use wasm_bindgen::prelude::Closure;
use web_sys::HtmlElement;

use crate::utils::{add_oneshot_event_listener, sleep, OnAnimationsFinishedExt};

type FutureCb = Rc<dyn Fn() -> Pin<Box<dyn Future<Output = ()> + Unpin>>>;

/// Defines when a transition should be considered finished:
/// - (default) on "transitionend" event
/// - on "animationend" event
/// - after a fixed duration
/// - after a custom future is resolved
/// - on the first "finish" event of the element's animations
#[derive(Default, Clone)]
pub enum TransitionDuration {
    Fixed(Duration),
    AnimationEnd,
    #[default]
    TransitionEnd,
    Future(SendWrapper<FutureCb>),
    AnimationsFinished,
}

impl std::fmt::Debug for TransitionDuration {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match self {
            Self::Fixed(duration) => write!(f, "Fixed({duration:?})"),
            Self::AnimationEnd => write!(f, "AnimationEnd"),
            Self::TransitionEnd => write!(f, "TransitionEnd"),
            Self::Future(_) => write!(f, "Future"),
            Self::AnimationsFinished => write!(f, "AnimationsFinished"),
        }
    }
}

impl TransitionDuration {
    pub(crate) fn on_transition_end(
        &self,
        element: &HtmlElement,
        cb: impl Fn(&HtmlElement) + 'static,
    ) {
        fn build_closure(
            element: &HtmlElement,
            cb: impl Fn(&HtmlElement) + 'static,
        ) -> Closure<dyn Fn()> {
            Closure::new({
                let element = element.clone();
                move || cb(&element)
            })
        }

        fn set_closure(
            element: &HtmlElement,
            event_type: &str,
            cb: impl Fn(&HtmlElement) + 'static,
        ) {
            let closure = build_closure(element, cb);
            add_oneshot_event_listener(element, event_type, &closure);
            closure.forget();
        }

        match self {
            Self::AnimationEnd => set_closure(element, "animationend", cb),
            Self::TransitionEnd => {
                set_closure(element, "transitionend", cb);
            }
            Self::Fixed(duration) => {
                let element = element.clone();
                let duration = *duration;
                spawn_local(async move {
                    sleep(duration).await;
                    cb(&element);
                });
            }
            Self::Future(f) => {
                let element = element.clone();
                let f = Rc::clone(f);
                spawn_local(async move {
                    f().await;
                    cb(&element);
                });
            }
            Self::AnimationsFinished => {
                element.on_animations_finished(
                    {
                        let element = element.clone();
                        move || cb(&element)
                    },
                    true,
                );
            }
        }
    }
}

impl From<Duration> for TransitionDuration {
    fn from(duration: Duration) -> Self {
        Self::Fixed(duration)
    }
}

impl<F, Fut> From<F> for TransitionDuration
where
    F: Fn() -> Fut + 'static,
    Fut: Future<Output = ()> + Unpin + 'static,
{
    fn from(f: F) -> Self {
        Self::Future(SendWrapper::new(Rc::new(move || Box::pin(f()))))
    }
}