More animations for a more fluent interface (see content for examples)

[jancborchardt]

https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design/

We should probably use prefers-reduced-motion to set --animation-quick and --animation-slow to 0?

Good examples in Nextcloud

• Hover/focus of the main app navigation [Bug]: Increased space between apps and name when hovering the apps menu #46542 (comment)
• Animation of switch toggle component: [NcCheckboxRadioSwitch, NcFormBoxSwitch] Animate switch toggle nextcloud-libraries/nextcloud-vue#8043
• Talk: Device/background picker fix(MediaSettings): jumping on devices/backgrounds switch spreed#12815
• Talk: Sending messages → Sliding them from the input field into the content
• Modals open with a slight zoom-in animation
• Opening of left navigation and right sidebar
• …

Where we can do more

• Controls feeling more responsive: feat(styling): Clicky controls nextcloud-libraries/nextcloud-vue#8579
• Improve animations of app-navigation and right sidebar fix(NcAppNavigation, NcAppSidebar): More graceful animations nextcloud-libraries/nextcloud-vue#8691
• Action menus → Quick shift-down animation: [NcPopover] Animate opening/closing popovers nextcloud-libraries/nextcloud-vue#8690 – PR at feat(NcPopover): animate open/close and remove arrow, fix #8690 nextcloud-libraries/nextcloud-vue#8769 & feat(NcHeaderMenu): animate open/close and remove caret nextcloud-libraries/nextcloud-vue#8770
• Hovering entries in app-navigation → Movement of highlight bar Add animation effect for navigation entries nextcloud-libraries/nextcloud-vue#8685
• Hovering tabs in the sidebar → Also movement of highlight bar, and icon animation Animate sidebar tabs like navigation entries nextcloud-libraries/nextcloud-vue#8793
• Files: Expanding of "Favorites" and "Shares" in left navigation → Expand/collapse animation
• Talk, Mail and other lists: Deleting items → Quick vertical compression animation
• Mail: Animate composer flying up on send mail#13274
• Mail: "Show all mailboxes" and "Collapse mailboxes" → Expand/collapse animation
• …

[kra-mo]

Also adding nextcloud-libraries/nextcloud-vue#8043 here