Saltar al contenido
Ayuda a traducir esta página

Transiciones

Transitions help to make a UI expressive and easy to use.

Material-UI provides a number of transitions that can be used to introduce some basic motion to your applications components.

La función de estilo de la paleta.

To better support server rendering, Material-UI provides a style prop to the children of some transition components, (Fade, Grow, Zoom, Slide). The style property must be applied to the DOM for the animation to work as expected.

// The `props` object contains a `style` property.
// You need to provide it to the `div` element as shown here.
function MyComponent(props) {
  return (
    <div {...props}>
      Fade
    </div>
  );
}

export default Main() {
  return (
    <Fade>
      <MyComponent />
    </Fade>
  );
}

Collapse

Expand vertically from the top of the child element. Use the orientation prop if you need a horizontal collapse. The collapsedHeight property can be used to set the minimum height when not expanded.

Fade

Fade in from transparent to opaque.

<FormControlLabel
  control={<Switch checked={checked} onChange={handleChange} />}
  label="Show"
/>
<Box sx={{ display: 'flex' }}>
  <Fade in={checked}>{icon}</Fade>
</Box>

Grow

Expand outwards from the center of the child element, while also fading in from transparent to opaque.

The second example demonstrates how to change the transform-origin, and conditionally applies the timeout prop to change the entry speed.

<FormControlLabel
  control={<Switch checked={checked} onChange={handleChange} />}
  label="Show"
/>
<Box sx={{ display: 'flex' }}>
  <Grow in={checked}>{icon}</Grow>
  {/* Conditionally applies the timeout prop to change the entry speed. */}
  <Grow
    in={checked}
    style={{ transformOrigin: '0 0 0' }}
    {...(checked ? { timeout: 1000 } : {})}
  >
    {icon}
  </Grow>
</Box>

Slide

Slide in from the edge of the screen. The direction property controls which edge of the screen the transition starts from.

The Transition component's mountOnEnter property prevents the child component from being mounted until in is true. This prevents the relatively positioned component from scrolling into view from it's off-screen position. Similarly the unmountOnExit property removes the component from the DOM after it has been transition off screen.

<Box sx={{ width: `calc(100px + 16px)` }}>
  <FormControlLabel
    control={<Switch checked={checked} onChange={handleChange} />}
    label="Show"
  />
  <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
    {icon}
  </Slide>
</Box>

Zoom

Expand outwards from the center of the child element.

This example also demonstrates how to delay the enter transition.

<FormControlLabel
  control={<Switch checked={checked} onChange={handleChange} />}
  label="Show"
/>
<Box sx={{ display: 'flex' }}>
  <Zoom in={checked}>{icon}</Zoom>
  <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
    {icon}
  </Zoom>
</Box>

TransitionGroup

To animate a component when it is mounted or unmounted, you can use the TransitionGroup component from react-transition-group. As components are added or removed, the in prop is toggled automatically by TransitionGroup.

  • 🍏 Apple
  • 🍌 Banana
  • 🍍 Pineapple
{addFruitButton}
<Box sx={{ mt: 1 }}>
  <List>
    <TransitionGroup>
      {fruitsInBasket.map((item) => (
        <Collapse key={item}>
          {renderItem({ item, handleRemoveFruit })}
        </Collapse>
      ))}
    </TransitionGroup>
  </List>
</Box>

TransitionComponent prop

Some Material-UI components use these transitions internally. These accept a TransitionComponent prop to customize the default transition. You can use any of the above components or your own. It should respect the following conditions:

  • Accepts an in prop. This corresponds to the open/close state.
  • Call the onEnter callback prop when the enter transition starts.
  • Call the onExited callback prop when the exit transition is completed. Call the onExited callback prop when the exit transition is completed.

For more information on creating a custom transition, visit the react-transition-group Transition documentation. You can also visit the dedicated sections of some of the components:

API