[material-ui][docs] Map Transition components to Material Design transition types?

[kaycebasques]

I'm opening this as an issue because it might be something that you'd be willing to add to the docs. I can make the doc updates myself.

Right now I'm reviewing the Material Design official docs to figure out what type of transition I should use for a certain interaction. It would have been helpful to me if the MUI Transitions doc briefly mentioned which type of transition each component maps to. For example, the Slide transition seems to map to peer transitions.

[mbrookes]

@kaycebasques The transitions predate that section, so there isn't a direct correspondence between them and the current Material spec. However for the couple in that section that do map, you could had a reference.

[oliviertassinari]

@kaycebasques We have limited support for transitions. This issue is related to #4117. I wouldn't use the Slide transition for the demos of https://material.io/design/navigation/navigation-transitions.html#peer-transitions. At least, not in its current implementation. It's designed for complete screen entrance. We use it for the non swipeable version of the Drawer. I like how Vuetify implements it: https://vuetifyjs.com/en/framework/transitions#usage.

[mbrookes]

It's designed for complete screen entrance.

That appears to be exactly what peer transitions describe.

[oliviertassinari]

We can consider the example of the specification.

The animation of the text fields can be implemented with the Slide X transition module of Vuetify. It's something we should probably support here.

The animation at the bottom can be implemented with react-swipeable-views. The Slider won't do it as we see the screen n°2 when moving from the screen n°3 to the n°1. However, if we are willing to give up on this point. Our Slider component might do it, to try.

[samuelsycamore]

Is this issue still relevant in Q4 '23?

[mbrookes]

@samuelsycamore I think we should close it at this point.