Transições

O Nuxt usa o componente de transição para permitir que você criar animações e transições incríveis entre suas rotas.

Para definir uma transição personalizada para uma rota específica, adiciona 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, ela será usada como o transition.name.

export default {
  transition: 'home'
}

O Nuxt usará essas configurações para definir o componente da seguinte forma:

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

Agora tudo o que você precisa fazer é criar a nova classe para suas 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'
  }
}

O Nuxt usará essas configurações para definir o componente da seguinte forma:

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

O objeto transition  pode ter várias propriedades tais como name, mode, css, duration e muitas mais. Consulte a documentação do vue para ter informações mais detalhadas.

Você também pode definir métodos dentro da propriedade transition , para saber mais sobre consulte os Gatilhos de JavaScript na documentação do 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 na navegação:

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

Configuração Global

O nome de transição padrão do Nuxt é "page". Para adicionar uma transição fade para todas páginas da sua aplicação, tudo o que você precisa é um ficheiro CSS que é compartilhado por todas rotas.

Nosso css global dentro de assets/main.css:

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

Depois adicionarmos seu caminho ao array css dentro do nosso ficheiro de configuração nuxt.config.js :

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

Configuração das Configurações

A Propriedade layoutTransition

A transição do esquema (ou layout) é usada para definir as propriedades da transições de esquema (layout).

A configuração padrão para transições de esquema 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 você quiser mudar as configurações padrões para as transições do seu esquema você pode fazer isso dentro do 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

A configuração padrão para transições de página são:

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

Deseja você modificar a configuração padrão, você pode fazer isso dentro do nuxt.config.js

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

Se você modificar o nome da transição da página você também terá de renomear a classe css.

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