Transições

A Nuxt utiliza o componente de transição para permitir-nos criar transições e animações fantásticas entre as nossas rotas.

Para definir uma transição personalizada para uma rota específica, adicionamos a chave transition ao componente de 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 (string), esta será usada como transition.name:

export default {
  transition: 'home'
}

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

<transition name="home"></transition>

Agora, tudo o que temos de fazer é criar a nova classe para as nossas transições:

<style>
  .home-enter-active, .home-leave-active { transition: opacity .5s; }
  .home-enter, .home-leave-active { opacity: 0; }
</style>

Objeto

Se a chave transition  for definida como um objeto:

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

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

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

O objeto transition pode ter muitas propriedades como name, mode, css, duration e muito mais. Consultar a documentação da Vue por mais informações.

Também podemos definir métodos na propriedade transition da página, para mais informações sobre as funções gatilhos de JavaScript consultar a documentação da Vue:

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

Modo de Transição

export default {
  transition: {
    name: 'home',
    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'
  }
}

Transições aplicadas às navegação:

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

Definições Globais

O nome da transição padrão da Nuxt é "page". Para adicionar uma transição de desaparecimento a cada página da nossa aplicação, só precisamos de um ficheiro .css que seja partilhado por todas as nossas rotas.

A nossa folha de estilo global está em assets/main.css:

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

Depois adicionamos o seu caminho ao vetor css no nosso ficheiro nuxt.config.js:

export default {
  css: ['~/assets/main.css']
}

Definições de Configuração

A Propriedade layoutTransition

A transição de disposição é utilizada para definir as propriedades predefinidas das transições de disposição.

As definições predefinidas para as transições de disposição são:

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

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

Se quisermos alterar as definições predefinidas para as nossas transições de disposição, podemos fazer isto no ficheiro nuxt.config.js:

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

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

A Propriedade pageTransition

As definições predefinidas para as transições de página são:

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

Se quisermos modificar as definições predefinidas, podemos fazê-lo no ficheiro nuxt.config.js:

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

Se modificarmos o nome da transição de página, também teremos de renomear a classe da folha de estilo:

.my-page-enter-active,
.my-page-leave-active {
  transition: opacity 0.5s;
}
.my-page-enter,
.my-page-leave-to {
  opacity: 0;
}