[Flyout System] Add animations to EuiFlyoutChild

[tkajtoch]

Problem Statement

The new EuiFlyoutChild is currently missing opening and closing animations. We should add them to maintain consistency with regular flyouts.

Proposed Solution

Opening and closing animations should be added to EuiFlyoutChild, matching the design of that component and the general look and feel of EUI flyouts.

Use Case

This is needed for the global flyouts initiative. The initial implementation was done in #8771.

Value / Impact

Urgency

EuiFlyoutChild animations are not a requirement for this quarter, but would be very welcome.

Do alternatives or workarounds exist?

Not at this moment. Overriding styles outside of EUI doesn't make sense in this case.

Related code or customizations

• Add EuiFlyoutChild for Grouped Flyouts #8771
• Add EuiFlyoutChild for Grouped Flyouts #8771 (comment)

[tkajtoch]

[Implementation plan for the current EuiFlyoutChild structure]

• Render EuiFlyout in a new wrapping div and move position: fixed and related styles like z-index: 1000 to that element
• When EuiFlyoutChild is rendered, render it inside that wrapping div instead of nested inside the .euiFlyout div
• When the child flyout is opening, set its z-index to -1, so it slides from below the main flyout
• On transitionend/animationend reset z-index if necessary (this will trigger another layerizing task, so try to avoid it).
• Remember about the reversed order when the flyout is closing.
• Focus and tab order should be handled automatically by the existing logic but ensure to test it

[Notes on the possible new DOM structure with FlyoutManager]

• The new implementation doesn't seem to affect the above approach
• Child flyouts are nested inside main flyouts for focus locking