Button's active css styling/animation is not the same with mobile and web

[chardskarth]

dioxus.active.button.mov

Is there a way to make the button feel like it's being clicked (while it's being hold down).

[wheregmis]

This is why we need to use dioxus-motion, an animation library for dioxus. (Promotion). Just kidding. Can you drop the button element with css? I can try during my spare time.

[chardskarth]

Thanks a lot! I want to learn rust and contribute so let me know if there's anything I can (try to) do to help.

To set it up, I just followed this guide: https://dioxuslabs.com/learn/0.6/cookbook/tailwind

Then css' active styles are added by adding the .btn class. I also use this crate: daisy_rsx = "0.1.14"

Here's my button component:

use daisy_rsx::Button as DaisyButton;
use dioxus::prelude::*;

#[component]
pub fn Button(text: String) -> Element {
    rsx! {
        button {
            class: "
                btn btn-outline my-2 mx-8
                bg-violet-500 hover:bg-violet-600 active:bg-violet-700
                ",
                // focus:outline-none focus:ring focus:ring-violet-300
            "{text}"
        }
        DaisyButton {
            "{text}"
        }
    }
}

[wheregmis]

After having a look, Mobile browsers render the :active pseudo-class differently.
Touch events are distinct from mouse events, necessitating touch-specific handling. I have attached button component which works on all platforms, you can have a try

#[component]
pub fn Button(text: String) -> Element {
    rsx! {
        button { 
            class: "
                btn btn-outline my-2 mx-8 p-4
                bg-violet-500 hover:bg-violet-600 
                active:bg-violet-700 active:scale-95
                touch-active:bg-violet-700 touch-active:scale-95
                active:shadow-inner touch-active:shadow-inner
                transform transition-all duration-150 ease-in-out
                shadow-lg hover:shadow-xl
                origin-center rounded-lg
                text-white font-semibold
                select-none touch-none
            ",
            "{text}"
        }
    }
}

[chardskarth]

Hi, this isnt working for me. Was there a tailwind plugin used for this?

[wheregmis]

Hi, this isnt working for me. Was there a tailwind plugin used for this?

Its just native tailwind, Weird as its working on my case.

[chardskarth]

This gets me thinking how its working for you while i had to add ontouchstart. 🤔

[wheregmis]

This gets me thinking how its working for you while i had to add ontouchstart. 🤔

It was foolishness of mine, i created a new component, but was importing another button where it had everything. lol

#[component]
pub fn Button(text: String) -> Element {
    rsx! {
        button { 
            class: "
                btn btn-outline my-2 mx-8 p-4
                bg-violet-500 hover:bg-violet-600 
                active:bg-violet-700 active:scale-95
                touch-active:bg-violet-700 touch-active:scale-95
                active:shadow-inner touch-active:shadow-inner
                transform transition-all duration-150 ease-in-out
                shadow-lg hover:shadow-xl
                origin-center rounded-lg
                text-white font-semibold
                select-none touch-none
                -webkit-tap-highlight-color: transparent
            ",
            style: "-webkit-user-select: none; -webkit-touch-callout: none;",
            onmousedown: move |_| {},  // Prevent default
            ontouchstart: move |_| {}, // Prevent default
            "{text}"
        }
    }
}

[chardskarth]

Oh! That explains everything then! 😅

However, i'm seeing this error in my logs, i wonder if there's anything else I'm missing.

Error parsing user_event: Error("Failed to deserialize event data for event touchstart:  Error(\"invali
d type: map, expected a sequence\", line: 0, column: 0)\n'Object {\n    \"alt_key\": Bool(false),\n    \"changed_touches\":
Object {\n        \"0\": Object {},\n    },\n    \"ctrl_key\": Bool(false),\n    \"meta_key\": Bool(false),\n    \"shift_key
\": Bool(false),\n    \"target_touches\": Object {\n        \"0\": Object {},\n    },\n    \"touches\": Object {\n        \"
0\": Object {},\n    },\n}'", line: 0, column: 0).Contents: Ok("{\"name\":\"touchstart\",\"data\":{\"alt_key\":false,\"ctrl_key\":false,\"meta_key\":false,\"shift_key\":false,\"changed_touches\":{\"0\":{}},\"target_touches\":{\"0\":{}},\"touches\":{\"0\":{}}},\"element\":130,\"bubbles\":true}"), raw: Request
18:24:14 [ios]     method: POST,
18:24:14 [ios]     uri: dioxus://index.html/__events,
18:24:14 [ios]     version: HTTP/1.1,
18:24:14 [ios]     headers: {
18:24:14 [ios]         "user-agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, li
ke Gecko) Mobile/15E148"

[chardskarth]

Oh, I found what's missing. Thanks to this stack overflow.

For some (magical) reason, adding ontouchstart event makes both button recognize the button's active state.

use dioxus::prelude::*;
use daisy_rsx::Button as DaisyButton;

#[component]
pub fn Button(text: String) -> Element {
    rsx! {
        button {
            class: "
                btn btn-outline my-2 mx-8 p-4
                bg-violet-500 hover:bg-violet-600",
                ontouchstart: |_| {},
                // focus:outline-none focus:ring focus:ring-violet-300
            "{text}"
        }

        DaisyButton {
            "{text}"
        }
    }
}

[chardskarth]

thanks @wheregmis for pointing out that mobile browsers renders buttons differently. I got an idea on what to search for the internet. I'll definitely check dioxus-motion. This is awesome 🎉!

[wheregmis]

thanks @wheregmis for pointing out that mobile browsers renders buttons differently. I got an idea on what to search for the internet. I'll definitely check dioxus-motion. This is awesome 🎉!

Wow great. Sure, do reach out if you build any cool stuffs with dioxus-motion.

[hahdsa]

https://youtu.be/UDaNFV1Ll3E?t=781

[hahdsa]

How much of Apple's latest WWDC24 animation / transition demo could be recreated using Dioxus-Motion?

[wheregmis]

How much of Apple's latest WWDC24 animation / transition demo could be recreated using Dioxus-Motion?

Dioxus motion doesnt have any transition animation. I think it will be best suited with router. Maybe expainding dioxus router to achieve this in future would be interesting. Other than that its mostly spring animation. And dioxus-motion also have sequence based animation where you can perform a sequence of animations which might make things easy. Theoritically speaking, anything except transition demo should be achievable.