A propriedade transition da página

O Nuxt usa o componente <transition> para permitir você criar transições ou animações incríveis entre suas páginas.

Tipo: String ou Object ou Function

Para definir uma transição personalizada para uma rota específica, simplesmente adicione a chave transition ao componente.

export default {
  // Pode ser uma Sequência de Caracteres
  transition: ''
  // Ou um Objeto
  transition: {}
  // ou uma Função
  transition (to, from) {}
}

Sequência de Caracteres

Se a chave transition for definida como uma sequência de caracteres, ela será usada como transition.name.

export default {
  transition: 'test'
}

O Nuxt usará essas definições para definir o componente conforme a seguinte:

<transition name="test"></transition>

Objeto

Se a chave transition for definida como um objeto:

export default {
  transition: {
    name: 'test',
    mode: 'out-in'
  }
}

O Nuxt usará essas definições para definir o componente conforme a seguinte:

<transition name="test" mode="out-in"></transition>

O objeto transition pode ter ass seguintes propriedades:

key	Type	Default	definition
`name`	`String`	`"page"`	O nome da transição aplicado sobre todas transições de rotas.
`mode`	`String`	`"out-in"`	O modo de transição aplicado sobre todas rotas, consulte a documentação do Vue.js
`css`	`Boolean`	`true`	Se aplicar a classes de transição de CSS. Padroniza para `true`. Se definir para `false`, apenas acionará gatilhos de JavaScript registado através dos eventos de componente.
`duration`	`Integer`	n/a	A duração (em milissegundos) aplicado sobre a transição, consulte a documentação do Vue.js .
`type`	`String`	n/a	Especifica o tipo dos eventos de transição, para esperar determinar o tempo final da transição. Os valores disponíveis são `'transition'` e `'animation'`. Por padrão, ele detetará automaticamente o tipo que tiver duração mais longa.
`enterClass`	`String`	n/a	O estado de inicial da classe de transição (classe ou transição de entrada). Consulte a documentação do Vue.js .
`enterToClass`	`String`	n/a	O estado final para a transição (estado final da classe ou transição de entrada). Consulte a documentação do Vue.js .
`enterActiveClass`	`String`	n/a	A classe aplicada em toda duração da transição (depois de adicionar a classe `enterClass` e antes de adicionar a classe `enterToClass`). Consulte a documentação do Vue.js .
`leaveClass`	`String`	n/a	O estado inicial da transição (classe ou transição de saída). Consulte a documentação do Vue.js .
`leaveToClass`	`String`	n/a	O estado final da transição (classe ou transição de saída). Consulte a documentação do Vue.js .
`leaveActiveClass`	`String`	n/a	A classe aplicada em toda duração da transição (depois de adicionar a classe `leaveClass` e antes de adicionar a classe `leaveToClass`). Consulte a documentação do Vue.js .

Você pode também definir métodos dentro da propriedade transition da página, esses são para os gatilhos de JavaScript :

beforeEnter(el)
enter(el, done)
afterEnter(el)
enterCancelled(el)
beforeLeave(el)
leave(el, done)
afterLeave(el)
leaveCancelled(el)

export default {
  transition: {
    afterLeave(el) {
      console.log('afterLeave', el)
    }
  }
}

Nota que: é também uma boa ideia adicionar css: false explicitamente para transições de somente JavaScript assim o Vue pode pular a deteção de CSS. Isto também previne as regras de CSS de acidentalmente interferirem com a transição.

Modo de Transição

A modo de transição padrão para páginas diferem do mesmo modo padrão no Vue.js. O modo transition é por padrão definido para out-in. Se você quiser executar transições de saída e entrada simultaneamente, você tem de definir o mode para uma sequência de caracteres vazia mode: ''.

export default {
  transition: {
    name: 'test',
    mode: ''
  }
}

Função

Se a chave transition for definida como uma função:

export default {
  transition(to, from) {
    if (!from) {
      return 'slide-left'
    }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}