Implement loading / layout view transitions

[timmo001]

Breaking change

Proposed change

Sets up a new mixin to be used for view transitions between layouts, providing css defined fade in / crossfade view transitions. Also adds a fade out for the launch screen so the transition between loading and the panel should be less abrupt and hopefully reduce element "pop-in".

Applies view transitions to:

• Loading -> Panel
• Sublayouts

Some changes I've deferred for later PRs. These are listed in the related task: #27238 (feel free to contribute other ideas here)

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue:
• This PR is related to issue or discussion: View transitions #27238
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[Misiu]

On the Overview page, the scrollbar behaves weirdly. Starts from the 8th second on the recording. Not sure if this is related to the change.

[karwosts]

Should we respect prefers-reduced-motion to disable?

[timmo001]

Discussed with design, we should also explore the view transitions api

[oerix]

I know this is WIP, but I don't feel the correct transition is being used for the sidebar. As you can see in the video, there are weird glitches/lags on the UI elements, they should use some subtle animation (slide-in?) and render near instant. Just thought I chime in, in case this hasn't been changed or mentioned already.

[timmo001]

I know this is WIP, but I don't feel the correct transition is being used for the sidebar. As you can see in the video, there are weird glitches/lags on the UI elements, they should use some subtle animation (slide-in?) and render near instant. Just thought I chime in, in case this hasn't been changed or mentioned already.

This is removed now (it was mostly a test). This PR is to focus solely on panel/page transitions, other view transitions can be investigated later

[timmo001]

Should we respect prefers-reduced-motion to disable?

Discussed with design, general agreement that animations should be set to 0 when reduced motion is set. This is now the case