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
• …

More animations initiative

• More snappy navigation and sidebar appearing: fix(NcAppNavigation, NcAppSidebar): More graceful animations nextcloud-libraries/nextcloud-vue#8691
• Action menus opening: [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
• Header menus opening: feat(NcHeaderMenu): animate open/close and remove caret nextcloud-libraries/nextcloud-vue#8770
• Hovering of navigation entries more playful: feat(NcAppNavigation): add animation effect for navigation items nextcloud-libraries/nextcloud-vue#8685
• Hovering of sidebar tabs more playful and with icon animation: feat(NcAppSidebarTab): add animation effect for tab button nextcloud-libraries/nextcloud-vue#8793
• Hover of menu entries: Same thing as for nav entries and sidebar tabs
• More responsive controls: feat(styling): Clicky controls nextcloud-libraries/nextcloud-vue#8579
• Switch toggle animation: [NcCheckboxRadioSwitch, NcFormBoxSwitch] Animate switch toggle nextcloud-libraries/nextcloud-vue#8043 → PR fix: animate toggle switch icon nextcloud-libraries/nextcloud-vue#8045
• Checkboxes and radio buttons animation: [NcCheckboxRadioSwitch] [NcRadioGroup] Animate checkboxes and radio buttons nextcloud-libraries/nextcloud-vue#8684
• Possible extra in apps:
  • 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