Pular para o conteúdo

🎉 Material UI v5 is out now! Check out the announcement blog post →

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.

Para um melhor suporte a renderização no servidor, Material-UI provê uma propriedade style para o 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 esperado.

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

Expanda verticalmente a partir do topo do elemento filho. 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"
/>
<div className={classes.container}>
  <Fade in={checked}>
    <Paper elevation={4} className={classes.paper}>
      <svg className={classes.svg}>
        <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
      </svg>
    </Paper>
  </Fade>
</div>

Grow

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

O segundo exemplo demonstra como alterar transform-origin e condicionalmente aplica a propriedade timeout para alterar a velocidade de entrada.

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.

<div className={classes.wrapper}>
  <FormControlLabel
    control={<Switch checked={checked} onChange={handleChange} />}
    label="Show"
  />
  <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
    <Paper elevation={4} className={classes.paper}>
      <svg className={classes.svg}>
        <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
      </svg>
    </Paper>
  </Slide>
</div>

Zoom

Expandir para fora partindo do centro do elemento filho.

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

Propriedade TransitionComponent

Os componentes aceitam uma propriedade TransitionComponent para customizar as transições 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.

Para obter maiores informações sobre como criar transações customizadas, visite a documentação de transições do React Transition Group.

API