Pular para o conteúdo
Ajude a traduzir esta página

Transições

Transições ajudam a deixar a interface expressiva e fácil de usar.

Material-UI provê um número de transições que podem ser usadas para introduzir alguns movimentos básicos para os componentes de sua aplicação.

A paleta com funções de estilo.

Para um melhor suporte a renderização no servidor, Material-UI provê uma propriedade style para o elemento filho de alguns componentes de transição, (Fade, Grow, Zoom, Slide). A propriedade style deve ser aplicada ao DOM para que a animação funcione conforme esperada.

// O objeto `props` contém uma propriedade `style`.
// Você precisa fornecê-lo ao elemento `div` como mostrado aqui.
function MyComponent(props) {
  return (
    <div {...props}>
      Fade
    </div>
  );
}

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

Collapse

Expandir para fora partindo do centro do elemento filho. Use a propriedade orientation se você precisar de um colapso na horizontal. A propriedade collapsedHeight pode ser usada para definir a altura mínima quando não expandida.

Fade

Esmaecer de transparente para opaco.

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

Grow

Expande para fora a partir do centro do elemento filho, enquanto também desvanece em efeito de transparente para opaco.

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

Deslize a partir da borda da tela. A propriedade direction controla em qual borda da tela a transição começa.

A propriedade mountOnEnter do componente de transição impede que o componente filho seja montado até que in seja true. Isso evita que o componente relativamente posicionado role para a visão a partir da posição de fora da tela. Da mesma forma, a propriedade unmountOnExit remove o componente do DOM após a transição ter sido exibida para fora da tela.

<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

Expandir para fora partindo do centro do elemento filho.

Este exemplo também demonstra como atrasar a transição de entrada.

<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>

Propriedade TransitionComponent

Alguns componentes do Material-UI usam essas transições internamente. Estas aceitam uma propriedade TransitionComponent para customizar a transição padrão. Você pode usar qualquer um dos componentes acima ou seu próprio componente. Ele deve respeitar as seguintes condições:

  • Aceitar uma propriedade in. Isso corresponde ao estado de aberto/fechado.
  • Chamar a propriedade de callback onEnter quando a transição de entrada iniciar.
  • Chamar a propriedade de callback onExited quando a transição de saída for concluída. Esses dois callbacks permitem desmontar os elementos filhos quando em estado fechado e totalmente transitados.

For more information on creating a custom transition, visit the react-transition-group Transition documentation. Você também pode visitar as seções dedicadas de alguns dos componentes:

API