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>
<transition>
às nossas páginas e disposições.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
transition
é, por padrão, definido como out-in
. Se quisermos 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: '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;
}
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)