Customizing the popup fade duration looks quite difficult

[davthedev]

In my current project, I find the default fade-in time for popup menus and windows too slow.

It is an admin app used on a computer, not a mobile, and I need to be able to click frenetically everywhere, do fast actions, without having to wait for slow animations.

Still, I do not want to totally kill animations, but make those faster. Therefore the prefer-reduced-motion styling does not suit my needs.

I am having some challenges finding the correct CSS I can apply to the app to override this fade-in time.

So far, I have encountered

--fbc-transition: all .15s cubic-bezier(.07,.95,0,1);
This one comes from the inspector, and I was not able to find this variable in the sources

--q-menu-transition-duration, --q-transition-duration
Even if I override those from src/css/app.scss, I do not see any difference.

Also noticed that --q-transition-duration: 300ms; is added to the inline style of many popups, including those used by q-btn-dropdown, q-menu inside q-btn, q-dialog. I guess it also affects q-select, but I cannot confim because the popup closes when I try to inspect using the browser debug tools.
This point defeats all attempts to customize that fade duration using CSS, especially if that rule is generated by the internal component code and not exposed as customizable from the outside.

I would like the change to be global, not requiring adding extra markup to each one of my popups, dropdowns, QSelects...
Additionally, as popups are created at the root of the DOM, it is impossible to override the styling by adding CSS to the element calling the said popup.

Would you have some hints?

[pdanpdan]

Check transition-duration in api cards

Btw, --fbc-transition is not from quasar

To inspect popups you have to check 'emulate always focused page' in chrome dev tools - in the tab where you also have options to emulate other things - i don't remember the tab name

[davthedev]

Thanks for the tip!
I mostly work on Firefox, should find some similar option.

The transition-duration property can be a good solution in the meantime.

If there is CSS-only solution, I would prefer it as I may benefit of the cascade and not have to change 50+ places where I already use popup and menu components.