Lessons Learned
jgiardino opened this issue · comments
Please capture any notes about your experience as comments to this issue. For example, did you try something that didn't work at all, did you try something that works but you wouldn't recommend, did you discover something you would recommend but that isn't so obvious, etc...
Sliding old tab contents out and new tab contents in is not good practice. If we only animate using the best performing css styles, then this type of animation results in the old tab contents still being present in the dom after sliding out of view, and accounted for in determining the bottom of the page. This results in a tab with short contents potentially having a scrollbar that’s intended for viewing the contents of the hidden tab with longer contents.
Sliding decorative elements (i.e elements with no meaning) from one element to another is really not possible, such as in the case of the top blue border on the active tab. We can create a background gradient to produce this decorative element, and animate background position of the parent element to avoid adding unnecessary elements to the dom, but this requires the parent to know which child is active. And animating background image positions might not perform that well.