As propriedades de transition

Define as propriedades padrão das transições de página e esquema.

A propriedade pageTransition

A versão 2.7.0 do Nuxt introduz a chave pageTransition em favor da chave transition para consolidar a nomeação com as chaves de transição de esquema.

• Tipo: String ou Object

Usada para definir as propriedades padrão das transições de página

Valor padrão:

{
  name: 'page',
  mode: 'out-in'
}

export default {
  pageTransition: 'page'
  // ou
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}

A chave da transição dentro do ficheiro nuxt.config.js é usada para definir as propriedades padrão das transições de página. Para saber mais sobre as chaves disponíveis quando a chave transition é um objeto, consulte propriedade da transição de páginas .

A propriedade layoutTransition

• Tipo: String ou Object

Usada para definir as propriedades padrão das transições de esquema. O valor fornecido dentro da opção name é configurado para funcionar com o nome fornecido no layout da sua pasta layouts.

Valor padrão:

{
  name: 'layout',
  mode: 'out-in'
}

export default {
  layoutTransition: 'layout'
  // ou
  layoutTransition: {
    name: 'layout',
    mode: 'out-in'
  }
}

.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}