Add helper to create sequential/staggered transitions

[emattias]

Just like we have the theme.transition.create helper I think it would be useful to have an helper to make sequential transitions.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Examples 🌈

Heres a proof of concept I whipped together:

const createSequential = (transitions) => {
  let prevDelay = 0;
  return transitions
    .map((propertyOrArray) => {
      const property = Array.isArray(propertyOrArray) ? propertyOrArray[0] : propertyOrArray;
      const options = Array.isArray(propertyOrArray) && propertyOrArray[1] ? propertyOrArray[1] : {};

      const transitionString = theme.transitions.create(property, { ...options, delay: prevDelay });
      prevDelay += theme.transitions.duration.standard;
      return transitionString;
    })
    .join(', ');
};

It could be used like this:

<div 
  style={{
    transition: theme.transitions.createSequential(['height', 'width', 'opacity'])
  }} 
/>

and it would be equivalent to writing something like:

<div 
  style={{
    transition: 'transition: height 300ms cubic-bezier(0.4,0,0.2,1) 0ms, width 300ms cubic-bezier(0.4,0,0.2,1) 300ms, opacity 300ms cubic-bezier(0.4,0,0.2,1) 600ms;'
  }} 
/>

Context 🔦

With the createSequential function above you can implement this (the gif drops some frames, the transition is actually smoother 😬. But the point is that it's sequential anyway 🙂) :

like this:

<div 
  style={{
    transition: theme.transitions.createSequential(
      isOpen
        ? ['height', 'width', 'opacity']
        : [['height', { duration: '400ms' }], 'width', 'opacity'].reverse(),
    ),
    ...(isOpen
      ? { width, height, opacity: 1 }
      : {
          width: 0,
          height: 0,
          opacity: 0,
        }),
  }}
/>

[oliviertassinari]

@emattias Thank you for opening this thread. We have some people asking for more animation helpers. I'm wondering if it's a problem Material-UI should solve outside of the most basic cases.
Your helper could potentially go into @material-ui/csskit, a new package we are working #14573. But I'm not sure. One certainty, it shouldn't be imported by default in everybody bundle.

[emattias]

Is theme.transitions.create() moved to @material-ui/css-kit?

[oliviertassinari]

@emattias I think that we should expose all our helpers standalone, then repackage some into createMuiTheme(), basically the existing ones so we don't introduce a breaking change.

[emattias]

Are you taking about in just 4.x or 3.x also?

Could explain in more detail what you mean by expose all our helpers standalone?

[oliviertassinari]

I'm talking 4.x. The color helpers can be exposed individually (color transformation, AAA contrast, etc.), transitions, breakpoints, etc.

[oliviertassinari]

I'm closing, it's too specific yet for the maturity of the project.