How to fix delayed CSS setting for an element in dropdown_button

[Kowersky]

Example Code

ui.add_head_html("""<style>
.custom-q-menu {
                margin-top: -47px !important;
                padding-top: 45px !important;
            }
            
            .q-menu.custom-q-menu {
                text-align: center !important;
                background: rgba(0, 0, 0, 0.0) !important;
                border-radius: 22px !important;
                border: 1px solid rgba(0, 247, 255, 0.1) !important;
                box-shadow: none !important;
                backdrop-filter: blur(8px) !important;
                padding-top: 45px !important;
            }
</style>
""")

youtube_videos = {'Tryb 1': 'SK5hczMDL-A', 'Tryb 2': '8ySCORsriu8', 'Tryb 3': 'EqTqOmDj8VI', 'Tryb 4': 'JGwWNGJdvx8', 'Tryb 5': 'JGwWNGJdvx8', 'Tryb 6': 'uI7zbsAj7nc'}
                        with ui.row().classes('gap-0'):
                            with ui.dropdown_button(settings["tryb"], auto_close=True).classes('w-48 normal-case text-sm').props('outline content-class="bg-transparent shadow-[0_0_15px_#0033994D] rounded-[15px] rounded-t-none shadow-none mt-[-2px] text-center text-sm custom-q-menu"') as tryb_dropdown:
                                with ui.element('div').classes('backdrop-blur-[6px]'):
                                    for tryb in youtube_videos:
                                        ui.item(tryb, on_click=lambda t=tryb: [change_tryb(t), update_visibility()]).classes('hover:bg-black/20 flex items-center justify-between')

Description

Hi. I'm creating my own dropdown_button menu style and I want the backdrop-filter blur to be set immediately, rather than only appearing after the menu is displayed. You can see the problem in the video. The menu appears and after about 0.5 seconds the blur is applied.
I know I can just remove this div, but then the dropdown_button will be blurred, and I don't want that.

2025-09-23.10-21-07.mp4

[evnchn]

Hello @Kowersky. Long time no see!

Quasar, IIRC, has intermediate class names for things it's in the middle of animating.

• Immediate course of action: Turn off animation if you don't want to figure out the class names
• Long-term course of action: Set animation to very long, style the intermediate, then restore the animation timing.

[Kowersky]

Could you give me an example because I don't quite understand how to do it. You mean to use props to set a longer animation, right?