Remove fomantic transition module

[silverwind]

Removes all dropdown and dimmer animations. Works everywhere as far as I can tell, but need to give this thorough testing. Removes around 70kb JS/CSS.

Note, I'm not 100% sure regarding the various callbacks, those will need more investigation, but it appears to work nonetheless.

Fixes: #15709

[silverwind]

Has bugs with menu hiding in the navbar because of interference from our own styles, wip.

[silverwind]

Hiding bug fixed. Fomantic apparently never removes the transition class after transition, so I replicated that and that makes the hiding CSS in nav work again.

[wxiaoguang]

It breaks the modal dialogs.

[silverwind]

I see what you mean, the position is incorrect, but modal works otherwise. This was not an issue in an earlier iteration of this, checking...

[silverwind]

Problem is the display: flex !important; inline style is missing, but interestingly, the module does not contain flex in the source.

[wxiaoguang]

IIRC Fomantic use some "visibility" tricks for showing/hiding some elements (with animation), but I can't tell the details at the moment .... too complex 😄

[silverwind]

Found it:

https://github.com/fomantic/Fomantic-UI/blob/de758dcb3b4b51657623d43893bc5351aadaf942/src/definitions/modules/transition.js#L236-L239

[silverwind]

Modal should be fixed. This replacement function is likely not 100% equivalent to the removed module, but it appears to work well enough.

[wxiaoguang]

TBH, I am not a fan of removing all animations.

According to modern web sites:

1. For dropdowns, it doesn't need to use animation in most cases
2. For fly-in and modal dialogs, in most cases, they use animations, I have checked Apple, Google, including GitHub's fly-in panels

So I do not think it's right to remove the animations totally.

[silverwind]

I like them nowhere and selectively allowing some would be a much more deeper dive into the internals of Fomantic that I'm not interested in doing.

Is it really so bad to not have the modal backdrop fade-in? Maybe if you really want, you could try adding a CSS transition to it, but I suppose without support in the function, it won't transition.

[delvh]

Have tested it.
Yes, something feels a little off when there's no delay for a modal.
But that sounds like a relatively easy fix where we simply add a small ease-in-out transition ourselves on all modals (.modal).
I don't think we need to keep the Fomantic module for that.

[silverwind]

Checked how GitHub does it, they have a 300ms fade-in (assume it's just opacity 0 to 1) animation on the modal content, but not the backdrop (which shows instantly). Hide is instant on both backdrop and modal, so there is no fade-out.

[silverwind]

Modal now fades in. I also added a new CSS variable --color-overlay-backdrop for the backdrop color and very slightly reduced it's opacity over its default rgba(0,0,0,.85). I think it will be useful for themes.

[silverwind]

One more tweak done: added box shadows to dropdowns so they stand out more against the background:

(subpixel misalignment in second screenshot is a fomantic bug)
also, fixed an issue with the border color changing unexpectedly on focus change.

[wxiaoguang]

Haven't tested, while it might be worth to try.