leptos_animate 0.1.15

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

use std::time::Duration;

use leptos::prelude::ReadUntracked;
use reactive_stores::ArcStore;
use web_sys::{self, HtmlElement};

use crate::{
    animation::{listeners, Animation as AnimationTrait, Initializer},
    easing::{cubic_out, Easing},
    impl_empty_animation_listeners,
    utils::{define_options, spawn_animation},
};

define_options! {
    In.options;
    @with_setters
    easing: Easing = cubic_out,
    duration: Duration = Duration::from_millis(200),
    delay: Duration = Duration::ZERO,
    enabled: bool = true
}

/// Zooms-in an element when it enters the DOM.
#[must_use]
#[derive(Clone, Default)]
pub struct In {
    options: ArcStore<Options>,
}

impl Initializer for In {
    fn init_animation(self, element: HtmlElement) -> impl AnimationTrait {
        Animation {
            element,
            options: self.options,
        }
    }
}

struct Animation {
    element: HtmlElement,
    options: ArcStore<Options>,
}

impl_empty_animation_listeners!(
    Animation;
    Enter,
    ImmediateEffect,
    Effect,
    Mutation,
    ParentMutation,
    EnterAnimationsFinished,
    MutationAnimationsFinished,
    ParentMutationAnimationsFinished,
    Cleanup
);

impl listeners::BeforeEnter for Animation {
    fn listening_for_before_enter(&self) -> bool {
        true
    }

    fn on_before_enter(&mut self) {
        let options = self.options.read_untracked();
        spawn_animation()
            .element(&self.element)
            .keyframe(|t| vec![("scale".into(), t.to_string())])
            .duration(options.duration)
            .easing(options.easing)
            .delay(options.delay)
            .call();
    }
}

impl AnimationTrait for Animation {
    fn enabled(&self) -> bool {
        self.options.read_untracked().enabled
    }
}