dioxus-transition 0.1.3

A Dioxus component for enter/leave transitions
Documentation 
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

use gloo::utils::window;
use wasm_bindgen::{JsCast, closure::Closure};

#[macro_export]
macro_rules! animate {
    ($element:expr, $duration:expr) => {
        $element.style().set_property("transition", $duration)?;

        $element
            .style()
            .set_property("transition-timing-function", "ease-in-out")?;
    };
    ($element:expr => using $class:expr => for $duration:expr => forwards) => {
        $element.class_list().add_1($class)?;
        animate!($element, $duration);
    };
    ($element:expr => using $class:expr => for $duration:expr => backwards) => {
        $element.class_list().remove_1($class)?;
        animate!($element, $duration);
    };
}

#[macro_export]
macro_rules! element_by_id {
    ($id:expr) => {{
        use wasm_bindgen::JsCast;

        gloo::utils::document()
            .get_element_by_id($id)
            .and_then(|element| element.dyn_into::<web_sys::HtmlElement>().ok())
    }};
}

#[macro_export]
macro_rules! wait_for {
    ($ms:expr) => {
        async_std::task::sleep(instant::Duration::from_millis($ms as u64))
    };
}

pub(crate) async fn request_animation_frame() {
    use futures_channel::oneshot;

    let (tx, rx) = oneshot::channel::<()>();
    let mut tx = Some(tx);

    let callback = Closure::wrap(Box::new(move || {
        if let Some(tx) = tx.take() {
            let _ = tx.send(());
        }
    }) as Box<dyn FnMut()>);

    let _ = window()
        .request_animation_frame(callback.as_ref().unchecked_ref());

    callback.forget();

    rx.await.expect("Failed to receive the animation frame")
}