Propriedade de Transição da Página

A Nuxt utiliza o componente <transition> para permitir-nos criar transições ou animações fantásticas entre as nossas páginas.

Tipo: String ou Object ou Function

Para definir uma transição personalizada para uma rota específica, simplesmente adicionamos a chave transition ao componente da página:

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, será utilizada como a transition.name:

export default {
  transition: 'test'
}

A Nuxt usará estas configurações para definir o componente da seguinte maneira:

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

Objeto

Se a chave transition for definida como um objeto:

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

A Nuxt usará estas configurações para definir o componente da seguinte maneira:

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

O objeto transition pode ter as seguintes propriedades:

Chave	Tipo	Predefinição	Descrição
`name`	`String`	`"page"`	O nome da transição aplicado a todas as transições de rota.
`mode`	`String`	`"out-in"`	O modo de transição aplicado em todas as rotas, consultar a documentação da Vue.js
`css`	`Boolean`	`true`	É possível aplicar classes de transição de folhas de estilo em cascata. Predefine como `true`. Se definida como `false`, somente acionará as funções gatilhos de JavaScript registados por eventos do componente.
`duration`	`Integer`	n/a	A duração (em milissegundos) aplicada à transição, consultar a documentação da Vue.js .
`type`	`String`	n/a	Especifica o tipo de eventos de transição a aguardar para determinar a temporização do fim da transição. Os valores disponíveis são `"transition"` e `"animation"`. Por predefinição, deteta automaticamente o tipo que tem uma duração mais longa.
`enterClass`	`String`	n/a	O estado de inicial da classe de transição (transição de entrada). Consultar a documentação da Vue.js .
`enterToClass`	`String`	n/a	O estado final para a transição (termino da transição de entrada). Consultar a documentação da Vue.js .
`enterActiveClass`	`String`	n/a	A classe aplicada em toda a duração da transição de entrada (depois de adicionar a classe `enterClass` e antes de adicionar a classe `enterToClass`). Consultar a documentação da Vue.js .
`leaveClass`	`String`	n/a	O estado inicial da transição (transição de saída). Consultar a documentação da Vue.js .
`leaveToClass`	`String`	n/a	O estado final da transição (termino da transição da saída). Consultar a documentação da Vue.js .
`leaveActiveClass`	`String`	n/a	A classe aplicada em toda a duração da transição de saída (depois de adicionar a classe `leaveClass` e antes de adicionar a classe `leaveToClass`). Consultar a documentação da Vue.js .

Também podemos definir métodos na propriedade transition, estes são para as funções 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: é também uma boa ideia adicionar explicitamente css: false para transições realizadas exclusivamente com a JavaScript para a Vue poder saltar a deteção de CSS. Isto também evita que regras de folha de estilo interfiram acidentalmente com a transição.

Modo de Transição

O modo de transição predefinido para as páginas difere do modo predefinido na Vue.js. O modo de transition é, por predefinição, definido como out-in. Se pretendermos executar transições de entrada e saída em simultâneo, temos de definir o modo para a 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'
  }
}