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

use std::time::Duration;

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

use crate::{
    animation::{Animation, Initializer},
    animations::zombie::Zombie,
    easing::{cubic_out, Easing},
    utils::{define_options, spawn_animation},
    TransitionDuration,
};

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

/// Spawns a [`Zombie`] with the target scale set to 0 when the element
/// leaves the DOM.
#[must_use]
#[derive(Clone, Default)]
pub struct Out {
    options: ArcStore<Options>,
}

impl Initializer for Out {
    fn init_animation(self, element: HtmlElement) -> impl Animation {
        Zombie::default()
            .enabled_signal(self.options.clone().enabled())
            .delay_signal(self.options.clone().delay())
            .duration(TransitionDuration::AnimationsFinished)
            .before_enter({
                let options = self.options;
                move |element| {
                    let options = options.read_untracked();
                    spawn_animation()
                        .element(element)
                        .keyframe(|t| vec![("scale".into(), (1.0 - t).to_string())])
                        .duration(options.duration)
                        .easing(options.easing)
                        .delay(options.delay)
                        .call();
                }
            })
            .init_animation(element)
    }
}