Implement a better animation when "committing" a new selection range

After #422 is fixed we display the current preselection range besides the already-committed selection ranges at the top. But the animation when we moves from “preselection” to “selection” could be made better, as it’s still the same as we had before the change. It would be better if the “preselected” value would transform seamlessly into the “commited” range.

STR:

1. Open a profile (for example https://perf-html.io/public/280e10708c0660695ef5af145c53179d29d9796c/calltree/)
2. Select a range.
3. Press the “+” button to commit the range

=> the animation at the top should be better.

As a suggestion, here is a possible simple transition:

• transition the color to the target color
• transition the opacity of the “>” element from transparent to opaque

This is only about the “appear” transition, as the “disappear” transition is good.

We use react-transition-group to manage transitions already, so hopefully this should be a matter of tweaking CSS classes. The relevant code that defines these transitions is: https://github.com/devtools-html/perf.html/blob/2f5bbfaa23337782ec7e4c468930041f8e453b6b/src/components/shared/FilterNavigatorBar.js#L32-L82 and the relevant CSS is: https://github.com/devtools-html/perf.html/blob/2f5bbfaa23337782ec7e4c468930041f8e453b6b/src/components/shared/FilterNavigatorBar.css#L109-L132

[canova]

Hi @mariehposa, assigning this to you. Let us know if you need anything!

[julienw]

Hey @hashi93, as you see, this issue is labeled as “assigned”, this means it’s not available for takers because somebody is already working on it. But you can find some good first issues with this link. And feel free to come on Slack if you have questions!