Nuxt 3 Release Candidate beta já está disponível! Descobre mais sobre isso v3.nuxtjs.org

Translated page Contents of this page might be outdated.

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'
  }
}

As transições aplicadas na navegação são:

  • / para /posts => slide-left,
  • /posts para /posts?page=3 => slide-left,
  • /posts?page=3 para /posts?page=2 => slide-right.