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

Transições

Transições ajudam a fazer a INTERFACE expressiva e fácil de usar.

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

Para um melhor suporte ao server rendering Material-UI provê uma propriedade de estilo 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 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

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

Fade in 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.

The Transition component's mountOnEnter property prevents the child component from being mounted until in is true. Isso evita que o componente relativamente posicionado role para a visão a partir da posição fora da tela. Da mesma forma, a propriedade unmountOnExit remove o componente do DOM após a transição ter sido exibida (in = false).

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

TransitionComponent prop

The components accept a TransitionComponent prop to customize the default transitions. 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.
  • 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. These two callbacks allow to unmount the children when in a closed state and fully transitioned.

API