Adding animation to ease transition from views with nav sidebar and those without
Description
We received some feedback stating that the shift of content that occurs when the sidebar is no longer present (changing from a project focus to a global focus) is disorienting (see example GIF). We can ease this transition a bit by giving the sidebar an animation.
Original Proposal
Add the following animation when switching between screens that don't have a navigation sidebar (e.g. projects) and screens that have it (e.g. project, group, user settings, admin area):
- 400ms position for the navigation sidebar
- 400ms opacity for the navigation sidebar
- 200ms opacity for the content and breadcrumbs
- The content and breadcrumbs width should not change when moving the navigation sidebar
Important: the issuable sidebar transition speed should match the navigation sidebar (i.e. the sidebars should have move at the same speed).
Updated proposal implemented
We've decided in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15758 to not add the animation when changing pages. The shift of content is not that extreme and the animation made the application feel slower.
Instead for this issue, we will make sure the animation for expanding/collapsing the navigation sidebar matches the one used for the issuable sidebar.