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:

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.